vue实现多级表格

Vue 实现多级表格的方法

递归组件实现嵌套结构

使用 Vue 的递归组件特性可以自然处理多级表格的嵌套关系。定义一个包含自引用的组件模板，通过数据驱动渲染层级。

<template>
  <table>
    <tr v-for="item in data" :key="item.id">
      <td>{{ item.name }}</td>
      <td v-if="item.children">
        <nested-table :data="item.children"/>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: 'NestedTable',
  props: ['data']
}
</script>

动态展开/折叠控制

通过添加展开状态标识实现交互功能，结合 v-show 或 transition 实现平滑的展开动画效果。

<template>
  <tr v-for="item in data" :key="item.id">
    <td @click="toggleExpand(item)">
      {{ item.expanded ? '-' : '+' }} {{ item.name }}
    </td>
    <td v-show="item.expanded">
      <nested-table :data="item.children"/>
    </td>
  </tr>
</template>

<script>
export default {
  methods: {
    toggleExpand(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

表头层级处理

对于需要显示多级表头的情况，可以采用二维数组结构描述表头关系，通过 colspan 和 rowspan 实现合并单元格。

<template>
  <thead>
    <tr v-for="(row, i) in headerRows" :key="i">
      <th 
        v-for="col in row" 
        :key="col.id"
        :colspan="col.span"
        :rowspan="col.rowspan">
        {{ col.title }}
      </th>
    </tr>
  </thead>
</template>

<script>
export default {
  computed: {
    headerRows() {
      // 处理表头层级关系算法
      return processedHeaders
    }
  }
}
</script>

性能优化建议

大数据量情况下建议使用虚拟滚动技术，只渲染可视区域内的行。可以配合 vue-virtual-scroller 等库实现。

import { RecycleScroller } from 'vue-virtual-scroller'

export default {
  components: { RecycleScroller },
  template: `
    <RecycleScroller 
      :items="flattenData"
      :item-size="50"
      key-field="id">
      <template v-slot="{ item }">
        <!-- 渲染单行内容 -->
      </template>
    </RecycleScroller>
  `,
  computed: {
    flattenData() {
      // 将嵌套数据展平为单层数组
    }
  }
}

第三方组件库方案

现有 UI 库如 Element UI 的 Table 组件支持多级表头配置，Ant Design Vue 的 Table 提供树形数据展示功能，可快速实现需求。

// Element UI 多级表头示例
columns: [
  {
    label: '一级',
    children: [
      {
        label: '二级',
        prop: 'field'
      }
    ]
  }
]

// Ant Design Vue 树形表格
<a-table :columns="columns" :data-source="treeData" :expandable="expandConfig"/>