当前位置：首页 > VUE

vue实现子表格

2026-03-28 07:06:35VUE

Vue 实现子表格的方法

在 Vue 中实现子表格通常可以通过嵌套组件或动态渲染的方式完成。以下是几种常见的方法：

使用嵌套组件

通过创建父表格组件和子表格组件，实现嵌套关系。父组件通过 props 传递数据给子组件，子组件接收并渲染数据。

<!-- ParentTable.vue -->
<template>
  <table>
    <thead>
      <tr>
        <th>Parent Header</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in parentData" :key="item.id">
        <td>
          {{ item.name }}
          <ChildTable :childData="item.children" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import ChildTable from './ChildTable.vue';

export default {
  components: { ChildTable },
  props: {
    parentData: Array,
  },
};
</script>

<!-- ChildTable.vue -->
<template>
  <table>
    <thead>
      <tr>
        <th>Child Header</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="child in childData" :key="child.id">
        <td>{{ child.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    childData: Array,
  },
};
</script>

使用动态渲染

通过 v-if 或 v-show 控制子表格的显示与隐藏，适合需要动态展开/折叠的场景。

<template>
  <table>
    <thead>
      <tr>
        <th>Parent Header</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in parentData" :key="item.id">
        <td>
          <button @click="toggleChild(item.id)">Toggle Child</button>
          {{ item.name }}
          <table v-if="expandedRows.includes(item.id)">
            <tr v-for="child in item.children" :key="child.id">
              <td>{{ child.name }}</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      expandedRows: [],
    };
  },
  methods: {
    toggleChild(id) {
      if (this.expandedRows.includes(id)) {
        this.expandedRows = this.expandedRows.filter(rowId => rowId !== id);
      } else {
        this.expandedRows.push(id);
      }
    },
  },
  props: {
    parentData: Array,
  },
};
</script>

使用第三方库

如果需要更复杂的功能（如排序、分页等），可以借助第三方表格库（如 Element UI 或 VxeTable）实现子表格。

vue实现子表格

<template>
  <el-table :data="parentData">
    <el-table-column prop="name" label="Parent Name" />
    <el-table-column label="Children">
      <template #default="scope">
        <el-table :data="scope.row.children">
          <el-table-column prop="name" label="Child Name" />
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    parentData: Array,
  },
};
</script>