问题概述
在树形表格中，通常需要实现以下功能：
全选：用户可以通过勾选表头的复选框来选中所有节点。
多选：用户可以通过勾选每一行的复选框来选中特定节点。
子节点勾选：当用户勾选某个节点的同时，其子节点也会被自动勾选。
父节点勾选：当所有子节点被勾选时，父节点也会自动被勾选。
在Vue 3和Element Plus中，如何实现上述功能可能不太明显，因此我们将一步一步解决这些问题。
解决方案
1. 创建树形表格
首先，我们需要创建一个基本的树形表格，以便进一步操作。我们可以使用Element Plus中的
el-table和el-table-column来构建表格。在下面的示例中，我们创建了一个包含两个节点的树形表格。第一列包含了复选框，用于选择节点。现在，我们将一步一步解决上述问题。
<template> <el-table :data="data" style="width: 100%"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="Name" prop="name"> </el-table-column> <el-table-column label="Children" prop="children"> <template v-slot="scope"> {{ scope.row.children.length }} </template> </el-table-column> </el-table> </template> <script> export default { data() { return { data: [ { name: "Node 1", children: [ { name: "Node 1.1", children: [], }, { name: "Node 1.2", children: [], }, ], }, { name: "Node 2", children: [], }, ], }; }, }; </script>
2. 实现全选功能
要实现全选功能，我们需要添加一个控制全选状态的变量
selectAll，并在表头的复选框中使用v-model绑定它
<template> <el-table :data="data" style="width: 100%"> <el-table-column type="selection" width="55" :selectable="selectAll"> </el-table-column> <!-- ... --> </el-table> </template> <script> export default { data() { return { data: [ // ... ], selectAll: false, }; }, }; </script>
我们在表头的复选框上绑定了
selectAll变量，但还没有实现其功能。我们需要在methods部分添加一个selectAllNodes方法，用于全选或取消全选所有节点。
<script> export default { data() { return { data: [ // ... ], selectAll: false, }; }, methods: { selectAllNodes() { this.$refs.treeTable.toggleAllSelection(); }, }, }; </script>
现在，我们需要在页面上添加一个全选按钮，使用户能够触发
selectAllNodes方法。 这样，我们就可以实现树形表格的全选功能。
<template> <div> <el-button @click="selectAllNodes"> {{ selectAll ? 'Unselect All' : 'Select All' }} </el-button> <el-table :data="data" style="width: 100%" ref="treeTable"> <el-table-column type="selection" width="55" :selectable="selectAll"> </el-table-column> <!-- ... --> </el-table> </div> </template>
3. 实现多选功能
要实现多选功能，我们需要在表格上添加一个
@selection-change事件监听器，该事件在选择项发生变化时触发。我们可以在事件处理程序中更新选中的节点列表。
<template> <div> <el-button @click="selectAllNodes"> {{ selectAll ? 'Unselect All' : 'Select All' }} </el-button> <el-table :data="data" style="width: 100%" ref="treeTable" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" :selectable="selectAll"> </el-table-column> <!-- ... --> </el-table> </div> </template> <script> export default { data() { return { data: [ // ... ], selectAll: false, selectedNodes: [], }; }, methods: { selectAllNodes() { this.$refs.treeTable.toggleAllSelection(); }, handleSelectionChange(selection) { this.selectedNodes = selection; }, }, }; </script>
现在，
selectedNodes数组将包含所有选中的节点。用户可以通过勾选每一行的复选框来选择特定节点。
4. 实现子节点勾选
在树形表格中，通常希望当用户勾选父节点时，其所有子节点也会被自动勾选。我们可以使用递归方法来实现这个功能。
首先，添加一个selectChildren方法，该方法接受父节点和一个布尔值，用于标识是否选中父节点。在方法中，我们将遍历父节点的所有子节点，并设置它们的选中状态。
<template> <el-table :data="data" style="width: 100%" ref="treeTable" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" :selectable="selectAll"> </el-table-column> <!-- ... --> </el-table> </template> <script> export default { data() { return { data: [ // ... ], selectAll: false, selectedNodes: [], }; }, methods: { // ... selectChildren(parent, isSelected) { parent.children.forEach((child) => { this.$refs.treeTable.toggleRowSelection(child, isSelected); if (child.children) { this.selectChildren(child, isSelected); } }); }, }, }; </script>
接下来，我们需要在
handleSelectionChange方法中检测是否选中了父节点，并调用selectChildren方法。
<template> <el-table :data="data" style="width: 100%" ref="treeTable" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" :selectable="selectAll"> </el-table-column> <!-- ... --> </el-table> </template> <script> export default { data() { return { data: [ // ... ], selectAll: false, selectedNodes: [], }; }, methods: { // ... handleSelectionChange(selection) { this.selectedNodes = selection; selection.forEach((node) => { if (node.children) { this.selectChildren(node, node.selected); } }); }, }, }; </script>
现在，当用户选中父节点时，所有子节点也会被自动勾选。
5. 实现父节点勾选
要实现父节点勾选功能，我们需要在handleSelectionChange方法中检测父节点是否应该被勾选。如果所有子节点都被选中，父节点也应该被选中。如果有任何一个子节点未被选中，父节点应该被取消选中。
我们可以使用递归方法来检查子节点的选中状态，并设置父节点的选中状态。
<template> <el-table :data="data" style="width: 100%" ref="treeTable" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" :selectable="selectAll"> </el-table-column> <!-- ... --> </el-table> </template> <script> export default { data() { return { data: [ // ... ], selectAll: false, selectedNodes: [], }; }, methods: { // ... handleSelectionChange(selection) { this.selectedNodes = selection; selection.forEach((node) => { if (node.children) { this.selectChildren(node, node.selected); } this.selectParent(node); }); }, selectParent(node) { if (node.parent) { const siblings = node.parent.children; const selectedSiblings = siblings.filter((sibling) => sibling.selected); if (selectedSiblings.length === siblings.length) { // All siblings are selected, select the parent this.$refs.treeTable.toggleRowSelection(node.parent, true); } else { // Not all siblings are selected, deselect the parent this.$refs.treeTable.toggleRowSelection(node.parent, false); } this.selectParent(node.parent); } }, }, }; </script>
现在，当用户选中所有子节点时，父节点也会自动被选中。如果任何子节点未被选中，父节点将被取消选中。
总结
在本文中，我们解决了Vue 3和Element Plus树形表格中的全选、多选、子节点勾选和父节点勾选等常见问题。通过逐步实现这些功能，您可以构建功能强大且用户友好的树形表格组件，以满足各种数据展示需求。希望这些示例代码对您有所帮助，让您更好地理解和使用Vue 3和Element Plus。
关于解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题，懒大王就先分享到这里了，如果你认为这篇文章对你有帮助，请给懒大王点个赞点个关注吧，如果发现什么问题，欢迎评论区留言！！💕💕
