el-table/element-ui 表格实现行编辑

珊妹儿最近一直项目需求要用el-table实现行编辑，这个功能嘛，是我领导写的，我呢，拿出来给大家借鉴一下，如果你们有更好的建议，欢迎留言~

实现思路：

1.表格数据我们拿到后，每一行都加个变量作为判断是否是编辑状态；

tableData.map((item) => {
    return {
        ...item,
        showEdit: false, //是否可编辑，默认加载完数据不是可编辑状态，获取焦点后才可编辑
        disabled: true, //操作列有个保存编辑的按钮，为了行编辑请求接口的时候有个加载状态
    };
 });

2.用户点击单元格，对单元格属性进行判断（目的是排除勾选列和操作列），通过获取dom元素实现自聚焦（单元格数据一般只有三种，input/select/date，而这三种在dom元素上都是input）；

1. 给表格绑定单元格点击事件 @cell-click="handleTableCellClick"
2.js里代码：
handleTableCellClick(row, column, cell, event) {
      // 只对数据列进行操作
      if (column.label != '操作' && column.type != 'selection') {
        row.showEdit = true; //这是给每一行加的变量，用来判断是否可编辑
        row.disabled = false; //这是保存编辑按钮的加载状态，操作列我加了个保存编辑的按钮
        this.$nextTick(() => {
          cell?.children?.[0]?.children?.[0]?.children?.[0]?.focus();
        });
    }
}

3.页面html代码里通过是否可编辑状态来动态显示隐藏单元格里嵌套的el-input/el-select/el-date-picker;(注意：我的表格是动态加载的，列也是动态获取的所以这里循环了columns,并且使用了插槽)

<el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width || 180"
        :show-overflow-tooltip="true"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-select
            v-if="column.type == 'select'"
            v-show="scope.row.showEdit"
            v-model="scope.row[column.prop]"
            placeholder="请选择"
          >
            <el-option
              v-for="item in column.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-else-if="column.type == 'date'"
            v-model="scope.row[column.prop]"
            v-show="scope.row.showEdit"
            type="date"
            style="width: 100%"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-input
            v-else-if="column.type == 'input'"
            size="small"
            v-show="scope.row.showEdit"
            @change="handleInputChange(scope)"
            @blur="handleInputBlur(scope.row)"
            v-model="scope.row[column.prop]"
          ></el-input>
          <template v-if="column.type == 'select'">
            <span
              v-show="!scope.row.showEdit"
              v-for="item in column.options"
              :key="item.value"
            >
              <template v-if="item.value == scope.row[column.prop]">{{
                item.label
              }}</template>
            </span>
          </template>
          <template v-else>
            <span v-show="!scope.row.showEdit">{{
              scope.row[column.prop]
            }}</span>
          </template>
        </template>
      </el-table-column>

4.大家注意：：：保存按钮获取一整行数据的时候，请求接口前要把我们自己加上的属性（showEdit,disabled）删掉！！！

如果大家有更好的想法，欢迎留言或私信都可以的哦~~