全方位驾驭Vue 3 + Element Plus树形表格操作：轻松搞定全选、多选和子节点勾选

2023-05-26 19:54:24

树形表格操作指南：掌握全选、多选和子节点勾选

简介

树形表格是一种常见的用于组织和展示具有层次关系数据的组件。它们广泛应用于文件系统、菜单和组织结构等场景。本文将深入探讨如何使用Vue 3和Element Plus库在树形表格中实现全选、多选和子节点勾选。

1. 创建树形表格

首先，我们需要创建一个树形表格。使用Element Plus的TreeTable组件，它提供了展开/收起节点、拖放节点和选中/取消选中节点等丰富的功能。

<el-tree-table
  :data="tableData"
  :columns="tableColumns"
  row-key="id"
  default-expand-all
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection"></el-table-column>
  <el-table-column type="expand"></el-table-column>
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="size" label="大小"></el-table-column>
  <el-table-column prop="type" label="类型"></el-table-column>
</el-tree-table>

2. 实现全选功能

要实现全选，我们需要在TreeTable中添加一个全选按钮。点击该按钮将选中所有节点。

<template>
  <el-tree-table
    :data="tableData"
    :columns="tableColumns"
    row-key="id"
    default-expand-all
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection"></el-table-column>
    <el-table-column type="expand"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="size" label="大小"></el-table-column>
    <el-table-column prop="type" label="类型"></el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button type="text" @click="handleSelectAll(scope.row)">全选</el-button>
      </template>
    </el-table-column>
  </el-tree-table>
</template>

const handleSelectAll = (row) => {
  const treeData = getChildrenNodes(row, true)
  treeData.forEach(item => {
    item.selected = true
  })
}

3. 实现多选功能

要实现多选，我们需要在TreeTable中添加一个复选框。选中复选框将选中该节点。

<template>
  <el-tree-table
    :data="tableData"
    :columns="tableColumns"
    row-key="id"
    default-expand-all
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection"></el-table-column>
    <el-table-column type="expand"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="size" label="大小"></el-table-column>
    <el-table-column prop="type" label="类型"></el-table-column>
  </el-tree-table>
</template>

4. 实现子节点勾选

要实现子节点勾选，我们需要处理父子节点之间的选中状态。当子节点被选中时，其父节点也应被选中。反之亦然。

const handleSelectionChange = (selection) => {
  // 遍历选中节点，更新其父节点的选中状态
  selection.forEach(item => {
    const parentNode = getParentNode(item)
    if (parentNode) {
      parentNode.selected = true
    }
  })
}

5. 常见问题解答