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

2023-05-06 11:35:40

Vue 3 Element Plus 树形表格的多选操作指南

概述

Vue 3 Element Plus 树形表格因其强大的功能和灵活的操作而受到开发者的青睐。其中，全选、多选、子节点勾选和父节点勾选等操作尤为重要，掌握这些操作技巧至关重要。本指南将详细介绍如何在 Vue 3 Element Plus 树形表格中实现这些操作。

全选操作

步骤：

添加一个控制全选状态的布尔变量 selectAll。
将 selectAll 绑定到表头复选框的 v-model 属性。

代码示例：

<el-table-column type="selection" :header-align="centerAlign" width="50" align="center">
  <template slot="header">
    <el-checkbox v-model="selectAll" @change="handleSelectAll"></el-checkbox>
  </template>
</el-table-column>

data() {
  return {
    selectAll: false,
  }
},
methods: {
  handleSelectAll(value) {
    this.selectAll ? this.checkAll() : this.uncheckAll();
  },
  checkAll() {
    this.data.forEach((item) => {
      this.$refs.treeTable.toggleRowSelection(item);
    });
  },
  uncheckAll() {
    this.data.forEach((item) => {
      this.$refs.treeTable.toggleRowSelection(item, false);
    });
  },
}

多选操作

步骤：

添加一个 @selection-change 事件监听器，在选择项发生变化时触发。
在该监听器中，更新选中的节点列表。

代码示例：

<el-table-column type="selection" :header-align="centerAlign" width="50" align="center">
  <template slot="header">
    <el-checkbox v-model="selectAll" @change="handleSelectAll"></el-checkbox>
  </template>
</el-table-column>

methods: {
  handleSelectionChange(val) {
    this.selectedRows = val;
  },
}

子节点勾选操作

步骤：

添加一个 selectChildren 方法，该方法接受父节点和一个布尔值（用于标识是否选中父节点）。
在该方法中，遍历父节点的所有子节点，并设置它们的选中状态。

代码示例：

methods: {
  selectChildren(row, checked) {
    const children = row.children;
    if (children && children.length > 0) {
      children.forEach((child) => {
        this.$refs.treeTable.toggleRowSelection(child, checked);
      });
    }
  },
}

父节点勾选操作

步骤：

检测父节点是否应该被勾选：
- 如果所有子节点都被选中，父节点也应该被选中。
- 如果有任何一个子节点未被选中，父节点应该被取消选中。
更新父节点的选中状态。

代码示例：

methods: {
  handleSelectionChange(val) {
    this.selectedRows = val;
    this.checkParentNode(this.selectedRows);
  },
  checkParentNode(selectedRows) {
    selectedRows.forEach((row) => {
      const parent = this.getParentNode(row);
      if (parent) {
        const allChildren = this.getAllChildren(parent);
        const selectedChildren = allChildren.filter((child) => this.selectedRows.includes(child));
        if (selectedChildren.length === allChildren.length) {
          this.$refs.treeTable.toggleRowSelection(parent, true);
        } else {
          this.$refs.treeTable.toggleRowSelection(parent, false);
        }
      }
    });
  },
  getParentNode(row) {
    const parent = this.data.find((item) => item.id === row.parentId);
    return parent;
  },
  getAllChildren(row) {
    const children = row.children;
    const allChildren = [];
    if (children && children.length > 0) {
      children.forEach((child) => {
        allChildren.push(child);
        allChildren.push(...this.getAllChildren(child));
      });
    }
    return allChildren;
  },
}