element plus 树形表格

Element Plus是一套基于Vue.js 2.0的桌面端组件库，其中包含了树形表格组件。树形表格是一种多级表格，可以通过点击展开或收缩子节点，以树形结构展示数据。在Element Plus中，树形表格组件是基于el-table组件进行扩展的，可以通过设置tree-props属性来实现树形表格的功能。同时，Element Plus也提供了一些方法和事件来操作树形表格，例如clearTreeNode方法可以清空指定节点的子节点数据。

相关问题

element-plus树形表格多选

Element Plus的Tree Table组件是一个功能强大的工具，用于展示层次结构的数据，并支持多选功能。在Element Plus中，你可以使用`el-tree`组件来实现树形表格，其中包含选项卡式或多列的多选模式。以下是基本步骤：

1. **引入组件**：首先，在你的Vue项目中引入`ElementPlus`的Tree Table组件，通常通过`import { ElTree } from 'element-plus'`。

2. **配置数据**：定义一个树形数据结构，每个节点可能包含`label`（标签）、`children`（子节点数组）和一个布尔属性`checkable`（可选，表示是否可以被选择）。

3. **设置选中状态**：在节点对象上添加`selected`属性来控制当前节点是否被选中。你可以在`<el-tree>`组件的`props`中设置默认的选中状态或提供一个方法来处理选中/取消选中事件。

4. **多选功能**：在`<el-tree>`组件中启用多选，通常通过设置`default-checked-keys`属性来初始化选中的节点，或者使用`@selection-change`事件监听用户的选择变化。

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    :default-checked-keys="selectedKeys"
    @selection-change="handleSelectionChange"
    :check-strictly="true" <!-- 如果不需要递归选择，可以关闭 -->
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: ...,
      selectedKeys: [], // 初始化的选中节点ID数组
      treeProps: {
        children: 'children',
        label: 'name', // 树形节点的显示文本
        disabled: 'disabled', // 如果有的节点不可选择
      },
    };
  },
  methods: {
    handleSelectionChange(newKeys) {
      this.selectedKeys = newKeys;
      // 这里可以对新选中的节点做进一步操作
    },
  },
};
</script>

从接口返回数据渲染element-plus树形表格

假设后端返回的数据格式如下：

{
  "id": 1,
  "name": "Parent Node",
  "children": [
    {
      "id": 2,
      "name": "Child Node 1",
      "children": []
    },
    {
      "id": 3,
      "name": "Child Node 2",
      "children": [
        {
          "id": 4,
          "name": "Grandchild Node 1",
          "children": []
        }
      ]
    }
  ]
}

可以先定义一个递归函数，将数据转化为 element-plus 树形表格所需的格式：

function transformData(data) {
  return data.map(item => {
    const { id, name, children } = item
    const node = {
      id,
      name,
      children: []
    }
    if (children && children.length > 0) {
      node.children = transformData(children)
    }
    return node
  })
}

然后在 Vue 组件中调用该函数，并将结果赋值给 treeData 属性：

<template>
  <el-table-tree-column :props="treeProps" :data="treeData" border>
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="Name" prop="name"></el-table-column>
  </el-table-tree-column>
</template>

<script>
export default {
  data() {
    return {
      treeData: []
    }
  },
  computed: {
    treeProps() {
      return {
        children: 'children',
        hasChildren: node => node.children && node.children.length > 0
      }
    }
  },
  methods: {
    fetchData() {
      // 发起 API 请求，获取数据
      // 假设数据存储在 response.data 中
      const response = await fetch('/api/tree')
      const data = await response.json()

      // 转化数据格式
      this.treeData = transformData(data)
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

注意：需要引入 `el-table-tree-column` 组件，并在 `treeProps` 中指定树形结构的属性名称。在上面的例子中，我们指定了 `children` 作为树形结构的属性。同时，在 `el-table-column` 组件中，需要指定展示的列。