【bug】el-tree+el-table左树右表，删除后刷新列表，数据回显不对_el-tree搜索栏删除的时候赋值混乱

不是太复杂的bug，但是当心静不下来的时候，还是花了一上午才捋顺

左树右表的结构，通常都是通过树的节点点击事件进行关联，将树节点的id传给列表接口，从而筛选出对应节点的列表数据

类似于下面这样：

 @node-click="handleNodeClick"
1

  handleNodeClick(data, node) {
  this.clickTreeData = data
      this.queryParams.Id = data.id
      this.getuseList(this.queryParams)
    },
1
2
3
4
5

handleNodeClick的第一个参数是data，这是因为新增和删除之后都要重新定位到对应节点并展示对应节点的列表数据

delUser(row) {
      const userId = []
      userId.push(row.astuserId)
      this.queryParams.Id = row.Id
      const name = row.userName
      this.$confirm('是否确认删除使用人为"' + name + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return delsStaff(userId)
        })
        .then(() => {
        //比较重要的是这里，定义getTreeNodeById方法处理数据
          const obj = this.getTreeNodeById(this.departTree, this.clickTreeData.id)
          this.handleNodeClick(obj)
          this.msgSuccess('删除成功')
        })
        .catch(function () {})
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

将树数据源和节点id传到getTreeNodeById方法中
如果节点id和树数据源的节点对应，obj就等于这一项，如果不对应，就继续向子项查找

 getTreeNodeById(options, id) {
      let obj = {}
      const dep = (data, nodeId) => {
        for (let v = 0; v < data.length; v++) {
          if (data[v].id === nodeId) {
            obj = data[v]
          } else if (data[v].children) {
            dep(data[v].children, nodeId)
          }
        }
        return obj
      }
      obj = dep(options, id)
      return obj
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

处理完数据后，再次调用树节点点击事件，将对应节点项传过去，也就是data接收

拿data中的id去调列表数据，自然就对应上了