vue树状表格简单实现

实现树状表格的基本思路

在Vue中实现树状表格通常需要以下核心功能：递归渲染子节点、展开/折叠控制、数据层级处理。以下是一个基于Element UI的简单实现方案。

安装Element UI（如未安装）

npm install element-ui

基础组件结构

<template>
  <el-table :data="flattenData" row-key="id" border>
    <el-table-column prop="name" label="名称">
      <template #default="{ row }">
        <span :style="{ paddingLeft: (row.level * 18) + 'px' }">
          <span v-if="row.children && row.children.length" @click="toggleExpand(row)">
            {{ row.expanded ? '▼' : '►' }}
          </span>
          {{ row.name }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="value" label="值" />
  </el-table>
</template>

数据处理方法

export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '父节点1',
          value: '值1',
          children: [
            { id: 2, name: '子节点1-1', value: '值1-1' },
            { id: 3, name: '子节点1-2', value: '值1-2' }
          ]
        },
        {
          id: 4,
          name: '父节点2',
          value: '值2',
          children: [
            { 
              id: 5, 
              name: '子节点2-1', 
              value: '值2-1',
              children: [
                { id: 6, name: '孙节点2-1-1', value: '值2-1-1' }
              ]
            }
          ]
        }
      ],
      flattenData: []
    }
  },
  methods: {
    flattenTree(data, level = 0, parentExpanded = true) {
      let result = [];
      data.forEach(item => {
        const newNode = {
          ...item,
          level,
          expanded: false,
          visible: parentExpanded
        };
        result.push(newNode);
        if (item.children && item.children.length) {
          result = result.concat(
            this.flattenTree(item.children, level + 1, newNode.expanded && newNode.visible)
          );
        }
      });
      return result;
    },
    toggleExpand(row) {
      row.expanded = !row.expanded;
      this.updateFlattenData();
    },
    updateFlattenData() {
      this.flattenData = this.flattenTree(this.treeData);
    }
  },
  created() {
    this.updateFlattenData();
  }
}

样式优化

.el-table .cell {
  white-space: nowrap;
}
span[style*="padding-left"] {
  cursor: pointer;
  user-select: none;
}

实现说明

1. 数据结构：使用包含children属性的嵌套结构表示树形数据
2. 扁平化处理：将树形数据转换为扁平数组以便表格渲染，同时添加level和expanded状态
3. 展开控制：通过点击图标切换expanded状态，动态更新可见数据
4. 缩进显示：根据level属性设置左padding实现视觉层级

进阶优化方向

• 添加懒加载功能
• 实现复选框全选/半选状态
• 增加拖拽排序支持
• 添加搜索过滤功能

通过以上方法即可实现基本的树状表格功能，可根据实际需求调整数据结构和交互细节。