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

目录

前言 

 问题概述

解决方案 

1. 创建树形表格

2. 实现全选功能 

3. 实现多选功能

4. 实现子节点勾选

5. 实现父节点勾选

总结

---

前言 

 问题概述

解决方案 

1. 创建树形表格

<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. 实现全选功能 

<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>

<script>
export default {
  data() {
    return {
      data: [
        // ...
      ],
      selectAll: false,
    };
  },
  methods: {
    selectAllNodes() {
      this.$refs.treeTable.toggleAllSelection();
    },
  },
};
</script>

<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. 实现多选功能

<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>

4. 实现子节点勾选

<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>

<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. 实现父节点勾选

<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>

总结