vue element el-table点击编辑单元格内容

记录修改单元格内容，template：

<template>
<el-table
      size="mini"
      :data="tableData"
      @cell-click="handleCellClick">
      <el-table-column label="序号" type="index" align="center" width="45"></el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :min-width="item.width"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <!-- 获取需要修改的单元格，转换编辑状态 -->
          <template v-if="item.prop=='code'">
            <el-input size="mini" v-model.trim="scope.row[item.prop]" v-show="scope.row.isEdit"
                      maxlength="7" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                      @change="handleEdit(scope.row, scope.$index)"></el-input>
            <span v-show="!scope.row.isEdit">{{ scope.row[item.prop] }}</span>
          </template>
          <template v-else>{{ scope.row[item.prop] }}</template>
        </template>
      </el-table-column>
    </el-table>
</template>

methods:：初始化数据时，添加是否可编辑

// 初始化数据
async getlist() {
  let params = { page: this.page, context: this.formSearch };
  const { data, code, message } = await apilist(params);
  if (code === 0 && data) {
    // 添加所有编辑状态为false
    data.data.forEach(item=>{
      return item.isEdit=false
    })
    this.tableData = data.data;
  }
  setTimeout(() => {
    this.isLoading = false;
  }, 200);
},

methods：点击单元格时获取是否为需要修改的字段

// 点击单元格修改
async handleCellClick(row, column, cell, event){
  // 所有其他行设置为false（作为关闭编辑）
  this.tableData.forEach(item=>{
    return item.isEdit=false
  })
  // 查询点击对象是否为修改的对象
  if(column.property==='code'){
    row.isEdit = true;  // 查询对应的字段展示输入框
  }
},

methods：完成编辑后请求数据

// 修改OA编码提交
async handleEdit(index, row) {
  let params={code:row.code}
  const {data,code,message}=await apiUpdateCode(params)
  this.$message({type:code===0?"success":"warning", message:message})
  row.isEdit = false;
  await this.getlist(); // 初始化列表
},

完成。