vue3使用elementui动态生成不固定列的table表格

Vue 3 中使用 Element UI 生成动态列的表格与 Vue 2 比较类似，只需要注意一些语法上的变化。下面是示例代码：

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

<script>
import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '性别', prop: 'gender' },
        // 可以根据需要添加更多列
      ],
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' },
        // 可以根据需要添加更多数据
      ]
    });

    return state;
  }
};
</script>

上面的代码中，通过 `reactive` 函数创建一个响应式对象 `state`，其中包含 `columns` 数组和 `tableData` 数组。`columns` 数组和 Vue 2 中的写法一致，定义表格的列及其属性；`tableData` 数组中的对象属性名也应与 `columns` 数组中的 `prop` 属性相同，用于表格显示数据。

在模板中，使用 `v-for` 指令循环渲染 `<el-table-column>` 标签，根据 `columns` 数组的长度动态生成表格列。需要注意的是，`<el-table-column>` 中的 `prop` 属性必须与 `tableData` 数组中的对象属性名相同，否则表格无法正确显示数据。

希望对您有帮助！