Vue动态修改element el-table的某列数据
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1、对话框打开时调用函数open@opened="checked"
2、可编辑 <el-table-column
--------
visEdit="true"
>
3、同步选中的数据List:multipleSelection ,函数 checked: function ()
<!-- 显示对话框 -->
<el-dialog v-dialogDrag style="font-size: 10px;" width='800px' heigt='500px' title="对话框"
:visible.sync="dialogName" @opened="checked">
<el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px;">
<el-table
ref="table"
tooltip-effect="dark"
cell-style="padding:0;"
style="font-size: 10px;"
fit="true"
height="250"
max-height="250"
:header-cell-style="{height:'15px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"
:data="dataList"
align="center"
highlight-current-row
@current-change="handleCurrentChange"
@selection-change="handleSelection">
<el-table-column
type="selection"
width="28"
height="28">
</el-table-column>
<el-table-column
prop="dataKey"
label="ID"
width="300px"
height="28px"
>
</el-table-column>
<el-table-column
label="dataName"
width="350px"
height="28px"
visEdit="true"
>
<template slot-scope="scope">
<el-input size='mini' :placeholder="" v-model="scope.row.name"
style="width:300px;height: 35px;margin-top:5px"
v-on:blur="nameCheck(scope.row.dataKey,scope.row.dataName)"
autocomplete="off"></el-input>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size='mini' type="primary" @click="founction" v-loading.fullscreen.lock="fullscreenLoading">
{{$t('common.Btn')}}
</el-button>
<el-button size='mini' @click="dialogName= false">{{$t("common.cancel")}}</el-button>
</div>
</el-dialog>
checked: function () {
//初始化默认选中状态
//首先el-table添加ref="table"引用标识
for (var i = 0; i < this.currentdataList.length; i++) {
for (var j = 0; j < this.dataList.length; j++) {
if (this.currentdataList[i].dataKey == this.dataList[j].dataKey) {
this.$refs.table.toggleRowSelection(this.ddtaList[j], true);
}
}
}
//初始化时修改table中可编辑框中的值,(赋初值)
for (var i = 0; i < this.dataList.length; i++) {
for (var j = 0; j < this.currentdataList.length; j++) {
if (this.dataList[i].dataKey == this.currentdataList[j].dataKey) {
this.dataList[i].port = this.currentdataList[j].port
}
}
}
},
/**
* @Description :表格多选框改变时,将所选行进行保存
*/
//multipleSelection 为数组
handleSelection(val) {
this.multipleSelection = val
},
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)