elementui 动态生成列

ElementUI 提供了 Table 组件来展示表格数据，可以通过 `columns` 属性来定义表格的列，在定义 `columns` 时，我们可以通过动态生成列的方式来满足一些特殊的需求。

动态生成列需要通过 `v-for` 指令来遍历数据，然后根据遍历的结果动态生成列。例如，我们可以定义一个数组 `columns` 来存放表格的列信息，然后通过 `v-for` 指令遍历该数组，生成对应的列。示例代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 25, gender: '男' }
      ],
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '性别', prop: 'gender' }
      ]
    };
  }
};
</script>

在上述代码中，我们定义了一个数组 `columns` 来存放表格的列信息，然后使用 `v-for` 指令遍历该数组，生成对应的列。由于 `columns` 数组中的每个元素都包含了列的属性和标签信息，因此我们可以通过 `:prop` 和 `:label` 属性来动态生成列。

需要注意的是，当表格的列需要动态生成时，我们需要保证表格数据的属性名与列的 `prop` 属性相对应，否则列将无法正确展示。