可以在 el-tree 组件的 data 属性中给每个节点添加一个 checked 属性,表示该节点是否被选中。当父节点被选中时,可以通过递归遍历子节点来将子节点的 checked 属性也设置为 true。当子节点被取消选中时,需要判断其兄弟节点是否都未选中,如果是,则将父节点的 checked 属性也设置为 false。

示例代码如下:

<template>
  <el-tree :data="treeData" @check-change="handleCheckChange"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '父节点1',
          children: [
            {
              label: '子节点1-1',
              checked: false
            },
            {
              label: '子节点1-2',
              checked: false
            }
          ],
          checked: false
        },
        {
          label: '父节点2',
          children: [
            {
              label: '子节点2-1',
              checked: false
            },
            {
              label: '子节点2-2',
              checked: false
            }
          ],
          checked: false
        }
      ]
    }
  },
  methods: {
    handleCheckChange(data, checked) {
      // 递归设置子节点的 checked 属性
      data.children && data.children.forEach(child => {
        child.checked = checked
        this.handleCheckChange(child, checked)
      })

      // 设置父节点的 checked 属性
      if (data.parent) {
        const siblings = data.parent.children
        const allChecked = siblings.every(item => item.checked)
        data.parent.checked = allChecked
        this.handleCheckChange(data.parent, allChecked)
      }
    }
  }
}
</script>
el-tree数据回显只选子节点父节点也会被选中解决办法

原文地址: https://www.cveoy.top/t/topic/bEMV 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录