el-table动态生成列和数据

在使用 Element UI 的 el-table 时，可以通过动态生成列和数据来实现一些动态的需求。下面是一个简单的示例：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableColumns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        }
      ],
      tableData: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ]
    };
  },
  methods: {
    // 动态添加列和数据
    addColumnAndData() {
      this.tableColumns.push({
        label: '性别',
        prop: 'gender'
      });
      this.tableData.push({
        name: '王五',
        age: 22,
        gender: '男'
      });
    }
  }
};
</script>

在上面的示例中，我们通过 `v-for` 指令来动态生成列，同时在 `data` 中定义了初始的列和数据。在 `addColumnAndData` 方法中，我们通过 `push` 方法动态添加了一列和一行数据。这样就实现了 el-table 的动态生成列和数据功能。