element-ui table 可编辑

element table组件没有直接可以使用可编辑的状态，需要自己手动编写一个。其实难度也不是很大。

整体思路如下：

1. 表格字段有两种状态一种是可写，一种只读（输入框和文本切换也可以）
2. 根据cell-click事件定位到点击到的位置
3. 输入框全部变成只读状态，根据坐标设置唯一可写状态
4. 点击其他区域关闭可写状态

cell-click事件无法获取点击的$index，需要做处理

//html
:row-class-name="tableRowClassName"

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

获取到横纵坐标以后就可以根据坐标来设置样式了

//js
  //点击一行编辑
  private coordinate = ""; //坐标
  cellClick(row, column, cell) {
    const { cellIndex } = cell;
    this.coordinate = `${row.index}-${cellIndex}`;
  }
  
//html
<el-table-column prop="buildingNumber" label="编号">
   <template scope="scope">
     <el-input
       :class="coordinate === `${scope.$index}-0` ? '' : 'readyonly'"
       v-model="scope.row.a"
     />
   </template>
 </el-table-column>
 <el-table-column label="名称">
   <template scope="scope">
     <el-input
       :class="coordinate === `${scope.$index}-1` ? '' : 'readyonly'"
       v-model="scope.row.b"
     />
   </template>
 </el-table-column>
 
 //less
.readyonly /deep/ .el-input__inner {
  padding: 0;
  border: 0;
  background: transparent;
}

最终效果如下：