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

这篇文章主要介绍“Vue怎么动态修改el-table的某列数据”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue怎么动态修改el-table的某列数据”文章能帮助大家解决问题。

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

对话框打开时调用函数open@opened="checked"

可编辑 

<el-table-column    --------visEdit="true"      >

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

设置el-table某一列点击出现输入框可以编辑

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

如下图所示：

具体实现：

<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780"  size="mini" @cell-click="tabClick">              <el-table-column label="顺序" prop="adSort">          <template slot-scope="scope">            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '顺序'">              <el-input v-model="scope.row.adSort" type="number" maxlength="20" placeholder="请输入顺序" size="mini" @blur="inputBlur(scope.row)" />            </span>            <span v-else>{{ scope.row.adSort }}</span>          </template>        </el-table-column></el-table>

通过 tableRowClassName 设置每一行的index：

tableRowClassName ({ row, rowIndex }) {      // 把每一行的索引放进row      row.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.index          this.tabClickLabel = column.label          break        default: return      }      console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)}

鼠标失焦事件：

// 失去焦点初始化inputBlur (row) {      // console.log('row', row)      this.tabClickIndex = null      this.tabClickLabel = ''     }

关于“Vue怎么动态修改el-table的某列数据”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。