当前位置：首页 > VUE

vue实现分组表格

2026-02-11 10:33:42VUE

Vue实现分组表格的方法

使用Vue实现分组表格可以通过多种方式完成，常见的有基于原生HTML表格、使用第三方组件库或自定义组件。以下是几种实现方案：

使用Element UI的el-table组件

Element UI的el-table组件内置了分组功能，通过row-key和tree-props属性实现树形表格效果。示例代码：

<el-table
  :data="tableData"
  row-key="id"
  :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>
  <table>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.name }}</td>
        <td v-if="!item.children">{{ item.value }}</td>
        <td v-else colspan="2">
          <group-table :data="item.children"/>
        </td>
      </tr>
    </tbody>
  </table>
</template>

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

使用Vue渲染函数

通过render函数动态生成表格结构：

export default {
  render(h) {
    const renderRow = (item) => {
      return item.children 
        ? h('tr', [
            h('td', { attrs: { colspan: 2 }}, [
              h('table', item.children.map(renderRow))
            ])
          ])
        : h('tr', [
            h('td', item.name),
            h('td', item.value)
          ])
    }
    return h('table', this.data.map(renderRow))
  }
}

使用Vuetify的v-data-table

Vuetify的数据表格组件支持分组显示：

<v-data-table
  :items="items"
  :headers="headers"
  group-by="category">
  <template v-slot:group.header="{ items, isOpen, toggle }">
    <tr>
      <td :colspan="headers.length">
        <v-btn @click="toggle" small icon>
          <v-icon>{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}</v-icon>
        </v-btn>
        {{ items[0].category }} ({{ items.length }} items)
      </td>
    </tr>
  </template>
</v-data-table>

数据处理技巧

实现分组表格前需要将扁平数据转换为嵌套结构：

function groupBy(data, key) {
  return data.reduce((acc, item) => {
    const group = item[key]
    if (!acc[group]) acc[group] = []
    acc[group].push(item)
    return acc
  }, {})
}

样式优化建议

为分组表格添加视觉层次：

.group-table table {
  width: 100%;
  border-collapse: collapse;
}
.group-table tr.group-header {
  background-color: #f5f7fa;
  font-weight: bold;
}
.group-table td {
  padding: 8px 12px;
  border: 1px solid #ebeef5;
}

以上方案可根据具体需求选择或组合使用，Element UI和Vuetify的方案适合快速开发，自定义组件方案则提供更高灵活性。

vue实现分组表格