el-tree和el-table结合

el-tree和el-table可以结合使用，实现联动效果。在el-table中选中某一行数据时，可以通过获取该行数据的相关字段（如部门ID）来匹配el-tree中对应的节点，并设置节点的勾选状态。

在el-tree中，可以通过设置节点的disabled属性来禁用节点的多选框。可以在created生命周期中调用getTreeData方法获取el-tree的数据，并在获取数据后调用disabledFn方法来设置节点的disabled属性为true。

在实现节点匹配的过程中，可以使用getTreeNodeById方法将树数据源和节点ID传入，通过递归遍历树数据源，找到对应的节点对象。

具体实现代码如下所示：

// 选中右边表格用户联动左边部门勾选
deptCheckedKeys() {
  let deptIds = this.selectList.map(sUser => sUser.deptIds)
  deptIds = deptIds.flatMap(item => item)
  let sDeptIds = deptIds.map(dept => dept.deptId)
  let uniqueDeptId = (sDeptIds) => \[...new Set(sDeptIds)\]
  if (uniqueDeptId(sDeptIds).length !== 0) {
    this.$nextTick(() => {
      this.$refs.tree.setCheckedKeys(uniqueDeptId(sDeptIds))
    })
    return uniqueDeptId(sDeptIds)
  } else {
    this.$nextTick(() => {
      this.$refs.tree.setCheckedKeys(\[\])
    })
    return \[\]
  }
},

// 在生命周期中调用
created() {
  this.getTreeData()
},

methods: {
  // 树状结构全部禁选
  disabledFn(treeData) {
    treeData.forEach(item => {
      this.$set(item, 'disabled', true)
      if (item.children) {
        this.disabledFn(item.children)
      }
    })
  },

  // 请求el-tree数据的方法
  getTreeData() {
    // 发送请求获取数据
    api().then(res => {
      this.treeData = res.data
    }).then(() => {
      // 调用禁选方法
      this.$nextTick(() => {
        this.disabledFn(this.treeData)
      })
    })
  },

  // 根据节点ID获取节点对象
  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\]
#### 引用[.reference_title]
- *1* *2* [【项目复盘-Vue2】element实现el-tree和el-table联动，el-table多页全选功能，el-tree全部节点禁选](https://blog.csdn.net/Weiqian_/article/details/130130527)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [【bug】el-tree+el-table左树右表，删除后刷新列表，数据回显不对](https://blog.csdn.net/weixin_49668076/article/details/127060401)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]