返回

一文读懂：树形表格多选之父节点和子节点勾选问题的解决妙招

前端

Element Plus 树形表格的勾选难题：一步步实现父子节点联动选择

Element Plus 勾选痛点

Element Plus 是一个功能强大的 Vue.js UI 组件库，其树形表格组件深受开发者喜爱。然而，默认情况下，该组件仅支持单层勾选，即子节点和父节点只能独立勾选，无法实现父子节点之间的联动选择。这在某些业务场景下会造成不便。

联动勾选解决方案

为了解决这个问题，我们可以对 Element Plus 的树形表格组件进行改造，使其支持父子节点之间的联动选择。下面将详细介绍实现步骤：

1. 安装依赖

npm install element-plus@2.2.8 --save

2. 引入组件

import { ElTree } from 'element-plus'

3. 定义树形表格组件

const Tree = {
  components: { ElTree },
  data() {
    return {
      treeData: [{
        id: 1,
        label: '父节点1',
        children: [{
          id: 2,
          label: '子节点1-1'
        }, {
          id: 3,
          label: '子节点1-2'
        }]
      }, {
        id: 4,
        label: '父节点2',
        children: [{
          id: 5,
          label: '子节点2-1'
        }, {
          id: 6,
          label: '子节点2-2'
        }]
      }]
    }
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      // 当子节点全部勾选时，父节点自动勾选
      if (checked && data.children && data.children.length > 0) {
        const allChecked = data.children.every(item => item.checked)
        if (allChecked) {
          data.checked = true
          indeterminate = false
        }
      }
      // 当勾选父节点时，所有子节点自动勾选
      if (checked && data.children && data.children.length > 0) {
        data.children.forEach(item => {
          item.checked = true
          indeterminate = false
        })
      }
    }
  }
}

4. 注册组件

const app = Vue.createApp(Tree)
app.mount('#app')

5. 使用组件

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

实际效果

经过上述步骤，我们成功改造了 Element Plus 的树形表格组件，使其支持父子节点之间的联动选择。现在，当子节点全部勾选时，父节点会自动勾选；当勾选父节点时，所有子节点会自动勾选。这有效解决了 Element Plus 树形表格的勾选难题。

拓展阅读

常见问题解答

1. 为什么需要改造 Element Plus 的树形表格组件？

Element Plus 默认不支持父子节点联动选择，这限制了某些业务场景的需求。

2. 如何实现子节点全部勾选时，父节点自动勾选？

在 handleCheckChange 方法中，当子节点全部勾选时，将父节点的 checked 设为 true，并取消父节点的 indeterminate 状态。

3. 如何实现勾选父节点时，所有子节点自动勾选？

在 handleCheckChange 方法中，当勾选父节点时，将所有子节点的 checked 设为 true，并取消子节点的 indeterminate 状态。

4. 如何使用改造后的组件？

在你的 Vue.js 应用中引入改造后的组件，并使用 :data 和 @check-change 属性。

5. 改造后的组件是否兼容 Element Plus 的其他版本？

目前该改造仅针对 Element Plus 2.2.8 版本，不保证兼容其他版本。

结论

通过本文介绍的方法，你已经学会了如何轻松解决 Element Plus 树形表格的勾选难题，实现父子节点之间的联动选择。希望这些技巧能帮助你构建出更强大的应用。