ElementUI-Table 编辑点击项

思路

当点击某一项的时候，给其添加类名，并手动聚焦
当离开其焦点的时候，发送请求+删除类名

实现

html

<el-table :data="tableData" :span-method="objectSpanMethod" border class="table" @cell-click="cellClick">
      <el-table-column prop="number" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.number" @blur="blur(scope.row,'number')" :ref="'number'+scope.$index"></el-input>
          <span>{{ scope.row.number }}</span>
        </template>
        </el-table-column>
</el-table>

js

private cellClick(row, column, cell) {
    if (this.typeArr.includes(column.property)) { //可以加一些判断条件,不然每次点击都会新增类名,typeArr为当前可编辑的列 ['number']
      cell.classList.add('current-cell');//添加类名
      const index = this.tableData.findIndex((item: any) => item.id === row.id);//找到当前点击的索引值
      //@ts-ignore
      this.$refs[column.property + index].focus();//手动聚焦
    }
  }
  private blur(row, type) {
    // 发送请求
    document.getElementsByClassName('current-cell')[0].classList.remove('current-cell'); //移除类名
  }

css

.table .el-input {
  display: none;
  /deep/ .el-input__inner {
    width: 80px;
    text-align: center;
    font-size: 14px;
  }
}
/deep/ .current-cell {
  padding: 0;
  .el-input {
    display: block;
  }
  span {
    display: none;
  }
}