Vue+element框架动态循环el-table-conlumn列表头

在Vue和Element UI中，如果你想要动态地创建`el-table-column`列表头，你可以这样做：

首先，你需要在Vue模板中定义一个变量来存储列标题及其对应的`prop`。例如：

<script setup>
import { ref } from 'vue'

const columns = ref([
  { title: 'Name', prop: 'name' },
  { title: 'Age', prop: 'age' },
  // 可以根据需求添加更多列
])
</script>

<template>
  <el-table :data="yourData" v-for="(column, index) in columns" :key="index">
    <el-table-column :title="column.title" :prop="column.prop"></el-table-column>
  </el-table>
</template>

在这个例子中，`columns`是一个响应式的数组，每次数据变化或新增列时，它会自动更新渲染后的表格。

如果你想根据某个条件或者动态数据来生成列头，可以在`columns`数据初始化的地方动态构建这个数组。例如，可以根据用户选择的不同字段来自动生成列头：

<script setup>
// 假设userSelections是从store或API获取的动态选择
const userSelections = computed(() => ['name', 'email'].filter(selection => selected));
</script>

<template>
  <el-table :data="yourData">
    <el-table-column v-for="(selection, index) in userSelections" :key="index" :title="selection" :prop="selection"/>
  </el-table>
</template>