当前位置：首页 > VUE

vue实现子表格

2026-02-10 21:04:30VUE

Vue 实现子表格的方法

在 Vue 中实现子表格（嵌套表格）可以通过多种方式完成，以下是几种常见的方法：

使用组件递归

通过递归组件实现子表格，适用于多层嵌套数据。定义一个表格组件，内部调用自身实现子表格的渲染。

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

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

使用 v-for 嵌套

适用于固定层级的子表格，通过多层 v-for 循环渲染数据。

<template>
  <table>
    <tr v-for="(parent, i) in data" :key="i">
      <td>{{ parent.name }}</td>
      <td>
        <table>
          <tr v-for="(child, j) in parent.children" :key="j">
            <td>{{ child.name }}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</template>

使用第三方库

借助如 element-ui 或 ant-design-vue 等 UI 库的表格组件，它们通常内置了展开子表格的功能。

<template>
  <el-table :data="data">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column label="Children">
      <template #default="{ row }">
        <el-table :data="row.children" v-if="row.children">
          <el-table-column prop="name" label="Child Name"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

动态加载子表格

通过点击事件动态加载子表格数据，适合数据量较大的场景。

vue实现子表格

<template>
  <table>
    <tr v-for="(item, index) in data" :key="index">
      <td>{{ item.name }}</td>
      <td>
        <button @click="loadChildren(item)">Show Children</button>
        <table v-if="item.showChildren">
          <tr v-for="(child, i) in item.children" :key="i">
            <td>{{ child.name }}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: 'Parent 1', children: [], showChildren: false },
        { name: 'Parent 2', children: [], showChildren: false }
      ]
    }
  },
  methods: {
    loadChildren(item) {
      item.showChildren = !item.showChildren
      if (item.children.length === 0) {
        // 模拟异步加载子数据
        setTimeout(() => {
          item.children = [{ name: 'Child 1' }, { name: 'Child 2' }]
        }, 500)
      }
    }
  }
}
</script>