vue实现多级表格

Vue 实现多级表格的方法

使用递归组件实现多级表格

递归组件是处理嵌套数据的理想方式，特别适合展示树形结构的数据。

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>值</th>
      </tr>
    </thead>
    <tbody>
      <tree-table :data="tableData"></tree-table>
    </tbody>
  </table>
</template>

<script>
export default {
  components: {
    TreeTable: {
      name: 'TreeTable',
      props: ['data'],
      template: `
        <template v-for="item in data">
          <tr :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.value }}</td>
          </tr>
          <tree-table 
            v-if="item.children && item.children.length"
            :data="item.children"
            :key="'child-' + item.id"
          ></tree-table>
        </template>
      `
    }
  },
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '一级1',
          value: 100,
          children: [
            {
              id: 2,
              name: '二级1',
              value: 50,
              children: [
                { id: 3, name: '三级1', value: 25 }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方库实现

对于更复杂的需求，可以考虑使用成熟的表格组件库：

1. Element UI 的 el-table 支持树形数据展示
2. Ant Design Vue 的 a-table 提供树形表格功能
3. VxeTable 专门为 Vue 设计的高级表格组件

以 Element UI 为例：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="value" label="值"></el-table-column>
  </el-table>
</template>

自定义展开/折叠功能

手动控制行的展开和折叠状态：

<template>
  <table>
    <tbody>
      <tr v-for="item in flattenedData" :key="item.id">
        <td @click="toggleExpand(item)">
          <span v-if="item.children" style="cursor:pointer">
            {{ item.expanded ? '▼' : '▶' }}
          </span>
          {{ item.name }}
        </td>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      flattenedData: []
    }
  },
  methods: {
    flattenData(data, level = 0, parentExpanded = true) {
      let result = []
      data.forEach(item => {
        const newItem = {...item, level, expanded: false}
        result.push(newItem)
        if (parentExpanded && item.children) {
          result = result.concat(this.flattenData(item.children, level + 1, newItem.expanded))
        }
      })
      return result
    },
    toggleExpand(item) {
      if (item.children) {
        item.expanded = !item.expanded
        this.flattenedData = this.flattenData(this.tableData)
      }
    }
  },
  created() {
    this.flattenedData = this.flattenData(this.tableData)
  }
}
</script>

样式处理

为多级表格添加缩进样式，增强可读性：

tr td:first-child {
  padding-left: calc(var(--level) * 20px);
}

在模板中动态设置层级：

<tr v-for="item in flattenedData" :key="item.id" :style="{'--level': item.level}">

性能优化

对于大型数据集，考虑使用虚拟滚动技术：

<template>
  <virtual-list :size="40" :remain="20">
    <tree-table :data="tableData"></tree-table>
  </virtual-list>
</template>