Vue如何动态修改el-table的某列数据 Vue如何动态修改el-table的某列数

动态修改el-table的某列数据
设置el-table某一列点击出现输入框可以编辑

动态修改el-table的某列数据

文章图片

1.对话框打开时调用函数open@opened="checked"
2.可编辑

3.同步选中的数据List：multipleSelection ，函数checked: function ()

设置el-table某一列点击出现输入框可以编辑设置el-table 某一列点击出现输入框可以编辑，鼠标失去输入框焦点时输入框消失，显示对应的值。
如下图所示：

文章图片

具体实现：

通过 tableRowClassName 设置每一行的index：

tableRowClassName ({ row, rowIndex }) {// 把每一行的索引放进rowrow.index = rowIndex}

行点击事件，当某一行被点击时，该行的某列设置 tabClickIndex：
由于

v-if="scope.row.index === tabClickIndex && tabClickLabel === '顺序'"

所以当前点击行的某列会出现输入框：

// tabClick row 当前行 column 当前列tabClick (row, column, cell, event) {switch (column.label) {case '顺序':this.tabClickIndex = row.indexthis.tabClickLabel = column.labelbreakdefault: return}console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)}

鼠标失焦事件：