table 单元格中实现级联框的编辑

需求描述：

如上图所示，我需要对姓名这一列某一行进行编辑，并且这一行在编辑时是一个级联选择器。举例来说，我点击王小虎，是日期2016-05-02的这一行时，变成了一个级联选择器，你可以选择或者不选择，当失去焦点后，完成编辑。

思路如下:

第一步编辑状态的处理

由于编辑当前行的数据，需要拿到表格数据后，每一行的数据中增加一个状态值比如 isSelected,代码如下

  this.tableData = this.tableData.map(item=>{
       return{
     ...item,isSelected:false
       }
  })
  

第二步 点击事件处理

选择el-table 组件中合适的API 事件，我是选择了 单元格点击事件来触发编辑状态  @cell-click

然后选择了 el-cascader组件中 @visibleChange 来实现编辑，以及编辑后的状态处理。

第三步 v-model处理

v-model 绑定的是 scope.row.groupId ，也就是说，我们绑定的是当前数据中返回的 value,这样我们在点击编辑后，级联框中显示的就是默认值。

第四步 初始化处理 给整个页面添加一个点击事件，整个点击事件是把表格的每一行数据的isSelected 都置为false，并且初始化时调用，注意：在onMounted中添加并调用，在unMounted 移除。

   onMounted(() => {
      closeEdit();
      window.addEventListener("click", closeEdit);
    });
    onUnmounted(() => {
      window.removeEventListener("click", closeEdit);
    });

第五步 细节处理

我在按照前四步进行开发的过程中，在调试的时候遇到了问题，比如冒泡问题，比如，上下两个单元格的编辑状态问题。冒泡的话，加个冒泡事件就可以，两个单元格的编辑状态问题的话，可以多加一个变量。

整体代码如下，仅做参考：

  // 行点击
    function groupEdit(row, column, cell, event) {
      if (editStatus.value) return false;
      switch (column.label) {
        case "组别":
          row.isGroupSelected = true;
          editStatus.value = true;
          event.stopPropagation();
          break;
        case "办公区域":
          row.isStationSelected = true;
          editStatus.value = true;
          event.stopPropagation();
          break;
      }
    }

    function visibleChange(payload, row, column) {
      row.oldStation = row.stationNumberList; // 区别办公区域是否真正编辑了，还是没有编辑
      if (!payload) {
        let params = {};
        switch (column.label) {
          case "组别":
            row.isGroupSelected = false;
            editStatus.value = false;
            params = {
              groupId: row.groupIds.slice(-1).join(","),
              userId: row.userId
            };
            updateNewEmployeeInfo(params); // 编辑
            break;
          case "办公区域":
            row.isStationSelected = false;
            editStatus.value = false;
            nextTick(() => {
              if (row.stationNumberList !== row.oldStation) {
                params = {
                  stationNumber: parseInt(
                    row.stationNumberList.slice(-1).join(",")
                  ),
                  userId: row.userId
                };
                updateNewEmployeeInfo(params); // 编辑
              }
            });
            break;
        }
      }
    }

  function closeEdit() {   // 初始化给页面添加事件
      tableDataRef.value.data.forEach(element => {
        element.isGroupSelected = false;
        element.isStationSelected = false;
      });
      editStatus.value = false;
    }