多选行,点击修改,指定列可以编辑。
解决 element table 数据改变之后列表不更新的问题
我们定义一个 table 的 key, 当我们改变数据的时候直接赋予一个随机值
这句代码写在你的逻辑处理层
业务:
点击修改 --> 选中的行,动态修改表格。
重新选中已经选中的行。
// 修改按钮
modifyBtnClick() {
if(this.multipleSelection.length===0) {
this.$message({
message: '至少选中一行数据进行修改操作',
type: 'warning'
});
return false
}
// 遍历选中数据
for (const data of this.multipleSelection) {
for(let i = 0; i<this.tableData.length ; i++){
if(data.id === this.tableData[i].id){
this.tableData[i].isEdit = true
}
}
}
// 赋予随机数,让表格刷新
this.mainTableKey = Math.random()
// DOM 更新 之后再执行
this.$nextTick(() => {
// 刷新表格之后: 重新选上覆选框
for(let i = 0; i<this.tableData.length ; i++){
if(this.tableData[i].isEdit) {
this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
}
}
});
},
export default {
data() {
return {
tableData: [],
// 定义此变量用来控制,数据变化后赋予新得随机数
mainTableKey: 1
}
}
<el-table
:key="mainTableKey"
:data="tableData"
style="width: 100%"
size="mini"
border
ref="multipleTable"
>
<el-table-column
prop="orderDate"
label="订单日期"
width="148px"
>
<!-- 可编辑表格, 直接使用数据驱动 isEdit 赋予此值为 true -->
<template slot-scope="scope">
<span v-if="scope.row.isEdit">
<el-date-picker
style=" width: 135px;"
v-model="scope.row.orderDate"
type="date"
placeholder="选择日期">
</el-date-picker>
</span>
<span v-else>{{scope.row.orderDate}}</span>
</template>
</el-table-column>
</el-table>