关于前端:elementUi-table点击可编辑简单实现

工作中的需要，找了多个中央总结进去的，给有须要的小伙伴！

 <el-table :data="powerMessageTableAll" border :cell-class-name="tableCellClassName" @cell-click="handleCurrentChange">
    <el-table-column label="名字" prop="name" align="center">
        <template slot-scope="scope">
            <el-input v-if="scope.row.index === tabClickIndex && scope.column.index === tableCellClickColumnIndex" 
            ref="gain" v-model="scope.row.name" type="input" style="width: 100%;hight:100%" 
            @blur="handleSave(scope)" />
            <span v-else>{{scope.row.name}}</span>
        </template>
    </el-table-column>
    <el-table-column label="工夫" prop="ctime" align="center">
        <template slot-scope="scope">
            <el-date-picker v-if="scope.row.index === tabClickIndex && scope.column.index === tableCellClickColumnIndex" 
             ref="gain" v-model="scope.row.ctime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;hight:100%" 
             @blur="handleSave(scope)" />
            <span v-else>{{scope.row.ctime}}</span>
        </template>
    </el-table-column>
</el-table>

data:{
     tabClickIndex: null, // 点击的单元
     tableCellClickColumnIndex: null,
      powerMessageTableAll: [
        {
          name: "小红",
          ctime: "2017-08-14",
        },
        {
          name: "小名",
          ctime: "2022-08-14",
        },
      ],
}

tableCellClassName({row, column, rowIndex, columnIndex}) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
handleCurrentChange(row, column, event) {
  this.tabClickIndex = row.index;
  this.tableCellClickColumnIndex = column.index;
  this.$nextTick(() => {this.$refs.gain.focus(); // 显示文本框并获取焦点
  });
},
handleSave() {
  this.tabClickIndex = null;
  this.tableCellClickColumnIndex = null;
},
// 聚焦这块有优化的空间，应该是让以后抉择的 input 框聚焦，JS 都忘差不多，也没有去找，应该是 event 找到对应的子元素而后 focus 的，工作中的小伙伴有优化的话，麻烦在底下贴下！