el-tree 动态禁用复选框

Question

这里是后端返回的数据

前端是这么处理的（没接触过树的结构 第一次 按照遍历来实现

const getVersionAllFunctions = async () => {
  try {
    const { data } = await getAllFunctions()
    const treeData = []

    data.forEach(item => {
      // 查找对应的catalog节点
      let catalogNode = treeData.find(node => node.label === item.catalog)
      if (!catalogNode) {
        catalogNode = {
          label: item.catalog,
          children: []
        }
        treeData.push(catalogNode)
      }

      // 如果存在groupName，则查找对应的groupName节点
      if (item.groupName) {
        let groupNode = catalogNode.children.find(node => node.label === item.groupName)
        if (!groupNode) {
          groupNode = {
            label: item.groupName,
            children: []
          }
          catalogNode.children.push(groupNode)
        }

        // 添加funcName节点
        groupNode.children.push({
          label: item.funcName,
          funcId: item.funcId
        })
      } else {
        // 如果groupName不存在，则直接添加funcName节点到catalogNode下
        catalogNode.children.push({
          label: item.funcName,
          funcId: item.funcId
        })
      }
    })

    funcIdList.value = treeData
    console.log(funcIdList.value, 'tree->>')
  } catch (error) {
    console.error('Error fetching version data:', error)
  }
}

这里用了el-tree加复选框的形式 这里怎么实现红框中选中一个复选框节点后 其他节点禁用 这里只针对第三层 因为最多只有第三层

Answer 1

在data中添加一个checkedFuncIds数组，用于存储已选中的funcId。

在check-change事件中获取当前选中节点的funcId，并根据该funcId判断是否已经被选中。

如果当前节点未被选中，则将其funcId添加到checkedFuncIds数组中，并遍历第三层节点，将除当前节点以外的其他节点的复选框全部禁用。

如果当前节点已经被选中，则将其funcId从checkedFuncIds数组中移除，并将所有节点的复选框全部启用。

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="funcId"
    :default-expand-all="true"
    @check-change="handleCheckChange"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      checkedFuncIds: [] // 存储已选中的funcId
    }
  },
  methods: {
    handleCheckChange(checkedNodes) {
      const funcIds = checkedNodes.map(node => node.funcId)
      const currFuncId = funcIds[funcIds.length - 1] // 当前选中的funcId
      if (this.checkedFuncIds.includes(currFuncId)) {
        // 如果当前已选中，则将其移除，并启用所有复选框
        this.checkedFuncIds = this.checkedFuncIds.filter(id => id !== currFuncId)
        this.enableAllCheckbox()
      } else {
        // 如果当前未选中，则将其添加到checkedFuncIds中，并禁用除当前节点以外的其他节点复选框
        this.checkedFuncIds.push(currFuncId)
        this.disableOtherCheckbox(currFuncId)
      }
    },
    disableOtherCheckbox(currFuncId) {
      this.treeData.forEach(catalogNode => {
        catalogNode.children.forEach(groupNode => {
          groupNode.children.forEach(funcNode => {
            if (funcNode.funcId !== currFuncId) {
              funcNode.disabled = true
            }
          })
        })
      })
    },
    enableAllCheckbox() {
      this.treeData.forEach(catalogNode => {
        catalogNode.children.forEach(groupNode => {
          groupNode.children.forEach(funcNode => {
            funcNode.disabled = false
          })
        })
      })
    }
  }
}
</script>

这里使用了disabled属性来禁用/启用复选框。在el-tree中，disabled属性会影响整个节点（包括子节点）的可用性。因此，在禁用/启用某个节点的同时，也需要禁用/启用其所有子节点的复选框。