当前位置：首页 > VUE

vue实现table嵌套table

2026-02-25 03:14:40VUE

Vue 实现 Table 嵌套 Table

在 Vue 中实现表格嵌套表格的功能，可以通过组件化和递归的方式实现。以下是具体实现方法：

模板结构

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="(value, key) in row" :key="key">
          <template v-if="Array.isArray(value)">
            <nested-table :data="value" :headers="nestedHeaders" />
          </template>
          <template v-else>
            {{ value }}
          </template>
        </td>
      </tr>
    </tbody>
  </table>
</template>

组件定义

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

使用示例

<template>
  <nested-table 
    :data="tableData" 
    :headers="['Name', 'Age', 'Orders']" 
  />
</template>

<script>
import NestedTable from './NestedTable.vue'

export default {
  components: {
    NestedTable
  },
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 25,
          orders: [
            { id: 1, product: 'Laptop', price: 999 },
            { id: 2, product: 'Phone', price: 599 }
          ]
        },
        {
          name: 'Jane',
          age: 30,
          orders: [
            { id: 3, product: 'Tablet', price: 399 }
          ]
        }
      ]
    }
  }
}
</script>

样式处理

<style scoped>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

注意事项

确保嵌套数据有明确的父子关系
为每个表格设置不同的headers属性
使用scoped样式避免样式冲突
考虑添加展开/折叠功能提升用户体验
对于大数据量建议使用虚拟滚动优化性能

扩展功能

可以通过添加props控制嵌套深度限制

props: {
  maxDepth: {
    type: Number,
    default: 3
  },
  currentDepth: {
    type: Number,
    default: 0
  }
}

在模板中添加深度判断

vue实现table嵌套table

<template v-if="Array.isArray(value) && currentDepth < maxDepth">
  <nested-table 
    :data="value" 
    :headers="nestedHeaders"
    :current-depth="currentDepth + 1"
  />
</template>