当前位置：首页 > VUE

vue实现子表格

2026-01-14 04:20:45VUE

实现子表格的基本思路

在Vue中实现子表格通常需要结合组件化思想和动态渲染技术。常见的场景是在主表格的行内嵌套子表格，展开主表行时显示对应的子表数据。

使用el-table实现子表格（Element UI）

安装Element UI后，可以通过el-table的expand特性实现子表格：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <el-table :data="props.row.children" border>
          <el-table-column prop="date" label="子表日期"></el-table-column>
          <el-table-column prop="name" label="子表姓名"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="主表日期"></el-table-column>
    <el-table-column prop="name" label="主表姓名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2023-01-01',
        name: '主表行1',
        children: [{
          date: '2023-01-01',
          name: '子表行1'
        }]
      }]
    }
  }
}
</script>

使用v-for实现自定义子表格

对于非Element UI项目，可以通过v-for嵌套实现：

vue实现子表格

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>
        <button @click="toggleExpand(index)">展开</button>
      </td>
      <td colspan="2" v-if="expandedRows.includes(index)">
        <table>
          <tr v-for="(child, childIndex) in item.children" :key="childIndex">
            <td>{{ child.name }}</td>
            <td>{{ child.value }}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [/* 数据 */],
      expandedRows: []
    }
  },
  methods: {
    toggleExpand(index) {
      const i = this.expandedRows.indexOf(index)
      i === -1 
        ? this.expandedRows.push(index)
        : this.expandedRows.splice(i, 1)
    }
  }
}
</script>

使用第三方组件库

一些专门的表格组件库提供更完善的子表格功能：

VxeTable：通过expand-config配置

vue实现子表格

<vxe-table
:data="tableData"
:expand-config="{trigger: 'cell'}">
<vxe-column type="expand" width="60">
 <template #content="{ row }">
   <vxe-table :data="row.children"></vxe-table>
 </template>
</vxe-column>
</vxe-table>

AG Grid：通过master/detail特性实现

性能优化建议

大数据量情况下需注意：

使用虚拟滚动技术
延迟加载子表数据
添加加载状态指示器
考虑分页加载子表数据

动态加载子表数据

点击展开时异步加载数据：

methods: {
  async loadChildren(row) {
    if (!row.children) {
      const res = await api.getChildren(row.id)
      this.$set(row, 'children', res.data)
    }
  }
}

以上方法可根据具体项目需求选择或组合使用，Element UI方案适合快速开发，自定义方案灵活性更高，专业表格组件则提供最完善的功能。