表头也能循环？el-table轻松实现动态添加表头与数据，还可循环嵌套！

2023-04-20 19:06:04

使用 Vue.js V-for 循环动态生成表格：实用指南

1. 轻松上手：使用 V-for 循环动态添加表头和数据

Vue.js 中的 V-for 循环可轻松实现动态表格创建。通过将数组数据源绑定到 el-table 组件的 columns 属性，可以动态生成表头。同样，通过绑定另一个数组数据源到 el-table 组件的 data 属性，可以动态填充表数据。

<el-table :columns="tableColumns" :data="tableData"></el-table>

<script>
export default {
  data() {
    return {
      tableColumns: [
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        }
      ],
      tableData: [
        {
          name: 'John',
          age: 20
        },
        {
          name: 'Mary',
          age: 25
        }
      ]
    }
  }
}
</script>

2. 进阶操作：使用嵌套循环创建更复杂的表结构

对于更复杂的表格结构，如具有分组或层级关系的表格，可以使用嵌套循环。在内层循环中生成表数据，并将内层循环的数据作为外层循环的表头，从而轻松创建嵌套结构表格。

<el-table :columns="tableColumns" :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      {{ scope.row.name }}
      <el-table :data="scope.row.children" :columns="childTableColumns"></el-table>
    </template>
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableColumns: [
        {
          prop: 'name',
          label: '姓名'
        }
      ],
      childTableColumns: [
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        }
      ],
      tableData: [
        {
          name: 'John',
          children: [
            {
              name: 'Jack',
              age: 10
            },
            {
              name: 'Jill',
              age: 12
            }
          ]
        },
        {
          name: 'Mary',
          children: [
            {
              name: 'Tom',
              age: 15
            },
            {
              name: 'Jerry',
              age: 18
            }
          ]
        }
      ]
    }
  }
}
</script>