解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题

前言

问题概述

解决方案

1. 创建树形表格

2. 实现全选功能

3. 实现多选功能

4. 实现子节点勾选

5. 实现父节点勾选

总结

前言

作者简介： 懒大王敲代码，计算机专业应届生

今天给大家聊聊解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题，希望大家能觉得实用！
欢迎大家点赞 👍 收藏 ⭐ 加关注哦！💖💖

在Web应用程序中，树形表格是一种常见的数据展示方式，它使用户能够查看层次结构数据。而在使用Vue 3和Element Plus构建树形表格时，处理全选和多选以及子节点勾选的问题可能会有些挑战。本文将介绍如何解决Vue 3和Element Plus树形表格中的这些常见问题，并提供示例代码以便于理解。

问题概述

在树形表格中，通常需要实现以下功能：

全选：用户可以通过勾选表头的复选框来选中所有节点。
多选：用户可以通过勾选每一行的复选框来选中特定节点。
子节点勾选：当用户勾选某个节点的同时，其子节点也会被自动勾选。
父节点勾选：当所有子节点被勾选时，父节点也会自动被勾选。
在Vue 3和Element Plus中，如何实现上述功能可能不太明显，因此我们将一步一步解决这些问题。

解决方案

1. 创建树形表格

首先，我们需要创建一个基本的树形表格，以便进一步操作。我们可以使用Element Plus中的el-table和el-table-column来构建表格。

在下面的示例中，我们创建了一个包含两个节点的树形表格。第一列包含了复选框，用于选择节点。现在，我们将一步一步解决上述问题。

<template><el-table :data="data" style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="Name"prop="name"></el-table-column><el-table-columnlabel="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-columntype="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-columntype="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-columntype="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-columntype="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-columntype="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-columntype="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 parentthis.$refs.treeTable.toggleRowSelection(node.parent, true);} else {// Not all siblings are selected, deselect the parentthis.$refs.treeTable.toggleRowSelection(node.parent, false);}this.selectParent(node.parent);}},},
};
</script>