返回

完全掌控树形表格数据，Element Plus帮您轻松搞定！

前端

树形表格：使用 Element Plus 在 Vue 3 中打造清晰、交互式的层次结构

简介

当我们处理庞大复杂的数据时，传统的表格展示方式往往显得杂乱无章，难以快速查找关键信息。树形表格 应运而生，以其清晰的层级结构和灵活的展开收起功能，让数据呈现井然有序，极大提升工作效率。本文将结合流行的前端框架 Vue 3 和优质组件库 Element Plus，手把手教你构建一个交互式树形表格，让数据可视化更上一层楼。

Vue 3 与 Element Plus 珠联璧合

Vue 3 以响应式设计、组件化开发和高性能著称，是现代前端开发的不二之选。而 Element Plus 作为基于 Vue 3 开发的组件库，提供丰富的 UI 组件，包括树形表格组件 el-table，助力开发者轻松构建交互式树形表格。

构建树形表格

导入 Element Plus

// 安装依赖
npm install element-plus

// 在 main.js 中引入 Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 将 Element Plus 注册为 Vue 的全局组件
app.use(ElementPlus)

创建树形表格数据

const data = [
  {
    id: 1,
    name: '根节点',
    children: [
      {
        id: 2,
        name: '子节点 1',
        children: [
          {
            id: 3,
            name: '孙节点 1'
          },
          {
            id: 4,
            name: '孙节点 2'
          }
        ]
      },
      {
        id: 5,
        name: '子节点 2',
        children: [
          {
            id: 6,
            name: '孙节点 3'
          },
          {
            id: 7,
            name: '孙节点 4'
          }
        ]
      }
    ]
  }
]

构建树形表格

<!-- 模板中使用 el-table 组件 -->
<el-table :data="data" row-key="id">
  <!-- 定义列 -->
  <el-table-column prop="name" label="名称"></el-table-column>
  <!-- 使用 expand-row-keys 绑定展开的行，并在行点击时动态更新 -->
  <el-table-column label="操作">
    <template #default="scope">
      <el-button type="text" @click="toggleExpand(scope.row)">
        {{ scope.row.expanded ? '收起' : '展开' }}
      </el-button>
    </template>
  </el-table-column>
</el-table>

编写逻辑代码

// 在 script 中定义展开的行，并编写点击行时展开或收起的逻辑
export default {
  data() {
    return {
      data: data,
      expandRows: []
    }
  },
  methods: {
    toggleExpand(row) {
      if (row.expanded) {
        this.expandRows = this.expandRows.filter(id => id !== row.id)
      } else {
        this.expandRows.push(row.id)
      }
    }
  }
}

优化树形表格

优化数据结构： 为提高性能，可对数据结构进行优化，如使用更轻量级的对象或数组存储数据。

合理设置层级深度： 避免树形表格层级过多，导致视觉混乱和操作不便。

美化视觉效果： 使用 CSS 或第三方库为树形表格添加美观的外观，增强视觉效果。

Element Plus 树形表格的优势

  • 易于使用： Element Plus 提供开箱即用的树形表格组件，开发者无需从头编写代码。
  • 灵活可定制： 树形表格的列、样式、行为都可以根据需要进行定制。
  • 交互友好： 树形表格支持行展开收起、行选中、行拖拽等交互操作。
  • 性能优化： Element Plus 对树形表格进行了性能优化，即使处理大量数据也能保持流畅的交互体验。

结语

使用 Element Plus 构建的树形表格，让数据可视化呈现更清晰、交互更友好。通过本文的指导，相信你已掌握构建树形表格的技巧。快去实践，让树形表格为你的数据展示添砖加瓦吧！

常见问题解答

1. 如何在树形表格中添加节点？

// 找到要添加节点的父节点
const parentNode = this.data.find(node => node.id === parentId)

// 创建新节点
const newNode = {
  id: newId,
  name: '新节点',
  children: []
}

// 将新节点添加到父节点的 children 中
parentNode.children.push(newNode)

2. 如何从树形表格中删除节点？

// 找到要删除的节点
const nodeToRemove = this.data.find(node => node.id === nodeId)

// 从父节点的 children 中移除该节点
parentNode.children = parentNode.children.filter(node => node.id !== nodeId)

3. 如何在树形表格中移动节点？

// 找到要移动的节点
const nodeToMove = this.data.find(node => node.id === nodeId)

// 找到新的父节点
const newParentNode = this.data.find(node => node.id === newParentId)

// 将节点从旧父节点的 children 中移除
parentNode.children = parentNode.children.filter(node => node.id !== nodeId)

// 将节点添加到新父节点的 children 中
newParentNode.children.push(nodeToMove)

4. 如何获取展开的节点 ID？

this.expandRows

5. 如何在树形表格中进行模糊搜索？

// 在 data 中使用 filter 方法进行模糊搜索
this.data.filter(node => node.name.includes(searchValue))