elemnet plus tree单选 父节点不能选（禁用

Element Plus 的树形表格也可以使用类似的方式实现全选反选功能。以下是示例代码： ```html <template> <div> <el-checkbox v-model="allChecked" @change="selectAll">全选</el-checkbox> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" v-model="checkedItems"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> <script> import { ref, computed } from 'vue'; import { ElTable, ElTableColumn, ElCheckbox } from 'element-plus'; export default { components: { ElTable, ElTableColumn, ElCheckbox }, setup() { const tableData = ref([ { id: 1, name: 'John', age: 25, children: [ { id: 11, name: 'Mike', age: 22 }, { id: 12, name: 'Mary', age: 20 } ] }, { id: 2, name: 'Tom', age: 30, children: [ { id: 21, name: 'Jack', age: 28 }, { id: 22, name: 'Lucy', age: 26 } ] } ]); const checkedItems = ref([]); const checkAll = ref(false); const allChecked = computed({ get() { return checkedItems.value.length === tableData.value.length; }, set(val) { checkedItems.value = val ? tableData.value.slice() : []; } }); function selectAll() { checkedItems.value = allChecked.value ? [] : tableData.value.slice(); } return { tableData, checkedItems, checkAll, allChecked, selectAll }; } }; </script> ``` 在上面的代码中，我们使用 Element Plus 的 `ElTable` 和 `ElTableColumn` 组件来实现树形表格，用 `type="selection"` 的方式来添加选择列，将其与 `checkedItems` 变量绑定。在全选复选框中，我们使用 `ElCheckbox` 组件，并将其与 `allChecked` 变量绑定，使用 `@change` 事件监听全选复选框的状态变化，通过 `selectAll` 方法实现全选反选功能。 需要注意的是，在树形表格中，每一行数据可能还包含子节点，因此我们需要修改计算全选状态的逻辑，同时需要修改全选反选的实现方式。

Element UI 是一个基于 Vue.js 的桌面端组件库，它提供了一系列的高质量组件，用于构建现代化的 Web 应用程序界面。它具有丰富的功能，包括表单、表格、对话框、导航菜单等等，可以大大提升开发效率。Element UI 还提供了灵活的主题定制和国际化支持，使开发者可以根据自己的需求自由定制界面风格和语言。它的文档详细清晰，易于上手，因此在 Vue.js 社区中非常受欢迎。