玩转el-tree打造el-table级联效果，小白也能秒懂！

2022-12-19 14:30:25

使用 el-tree 巧妙实现 el-table 层级效果

引言

在前端开发中，我们经常需要创建类似于表格的数据展示界面。如果这些数据具有层级结构，并且需要支持无限嵌套，那么使用传统的 el-table 组件可能会遇到困难。本文将介绍一种巧妙的解决方案，使用 el-tree 组件来实现 el-table 的层级效果，让你轻松搞定这项难题。

第一步：引入 el-tree 组件

首先，你需要在你的项目中引入 el-tree 组件。有两种方法可以实现：

方法一： 使用 npm 安装 element-ui，然后在组件中引入 el-tree：

import { ElTree } from 'element-ui'

Vue.component('el-tree', ElTree)

方法二： 直接在项目中引入 el-tree 组件：

<script src="https://unpkg.com/element-ui/lib/tree.js"></script>

第二步：创建 el-tree 实例

接下来，创建 el-tree 组件实例：

<el-tree
  :data="treeData"
  :props="treeProps"
  :show-checkbox="true"
  :default-expand-all="true"
  @node-click="handleNodeClick"
>
</el-tree>

属性说明：

treeData： 树形数据，使用数组表示树形结构。
treeProps： 树形组件属性，如节点标签和子节点属性。
show-checkbox： 是否显示复选框。
default-expand-all： 是否默认展开所有节点。
@node-click： 节点点击事件。

第三步：处理节点点击事件

当用户点击节点时，需要处理事件：

handleNodeClick(data) {
  console.log(data)
}

从 data 中获取当前点击的节点数据，进行处理，如显示在 el-table 中。

第四步：使用 el-table 显示数据

最后，使用 el-table 组件显示数据：

<el-table
  :data="tableData"
  :border="true"
  :style="{ width: '100%' }"
>
  <el-table-column
    prop="name"
    label="名称"
  >
  </el-table-column>
  <el-table-column
    prop="description"
    label=""
  >
  </el-table-column>
</el-table>

属性说明：

data： 表格数据，使用数组表示。
border： 是否显示边框。
style： 表格样式。
prop： 列的属性。
label： 列的标签。

示例代码

<template>
  <div>
    <el-tree
      :data="treeData"
      :props="treeProps"
      :show-checkbox="true"
      :default-expand-all="true"
      @node-click="handleNodeClick"
    >
    </el-tree>
    <el-table
      :data="tableData"
      :border="true"
      :style="{ width: '100%' }"
    >
      <el-table-column
        prop="name"
        label="名称"
      >
      </el-table-column>
      <el-table-column
        prop="description"
        label=""
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTree, ElTable, ElTableColumn } from 'element-ui'

export default {
  components: { ElTree, ElTable, ElTableColumn },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '根节点 1',
          children: [
            {
              id: 2,
              label: '子节点 1-1'
            },
            {
              id: 3,
              label: '子节点 1-2'
            }
          ]
        },
        {
          id: 4,
          label: '根节点 2',
          children: [
            {
              id: 5,
              label: '子节点 2-1'
            },
            {
              id: 6,
              label: '子节点 2-2'
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      tableData: []
    }
  },
  methods: {
    handleNodeClick(data) {
      this.tableData = data.data
    }
  }
}
</script>