v-for渲染el-table

### 使用 `v-for` 循环渲染 Element UI 的 `el-table`

为了实现动态表格列的创建，可以利用 Vue.js 中的 `v-for` 指令来遍历一个定义好的列配置数组，并将其映射到 `el-table-column` 组件上[^1]。

下面是一个完整的示例，展示了如何通过 `v-for` 渲染 `el-table`：

<template>
  <div>
    <!-- 定义 table 数据源 -->
    <el-table :data="tableData">
      <!-- 动态生成每一列 -->
      <el-table-column 
        v-for="column in columns" 
        :key="column.prop"
        :prop="column.prop"
        :label="column.label">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格的数据项
      tableData: [
        { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' }
      ],
      // 列描述符
      columns: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        { prop: 'address', label: '地址' }
      ]
    };
  }
};
</script>

在这个例子中，`columns` 数组包含了每列表头的信息以及对应数据字段的名字。对于每一个元素，在模板里会有一个 `<el-table-column>` 被创建出来并绑定相应的属性值给它。这使得即使当列结构发生变化时也只需要修改 JavaScript 部分而不需要改动 HTML 结构本身。