vue3 el-table动态表头

在 Vue 3 中使用 Element Plus 的 <el-table> 组件实现动态表头，可以通过绑定 table-column 的 prop 属性来动态地改变列的名称或者通过计算属性来动态生成列的配置。以下是一些实现动态表头的方法：

方法1：使用 v-for 指令

你可以在 <el-table-column> 上使用 v-for 指令来动态生成列。这种方式适用于列数和列名在运行时可能会改变的情况。

<template><el-table :data="tableData" style="width: 100%"><el-table-columnv-for="column in columns":key="column.prop":prop="column.prop":label="column.label":width="column.width"></el-table-column></el-table>
</template><script setup>
import { ref } from 'vue';const columns = ref([{ prop: 'date', label: '日期', width: 180 },{ prop: 'name', label: '姓名', width: 180 },{ prop: 'address', label: '地址' }
]);const tableData = ref([{ date: '2023-04-01', name: '张三', address: '上海市浦东新区' },{ date: '2023-04-02', name: '李四', address: '北京市海淀区' }
]);
</script>

方法2：使用计算属性动态生成列配置

如果你需要根据某些条件（如用户选择、API响应等）动态改变列的显示，可以使用计算属性。

<template><el-table :data="tableData" style="width: 100%"><el-table-columnv-for="column in computedColumns":key="column.prop":prop="column.prop":label="column.label":width="column.width"></el-table-column></el-table>
</template><script setup>
import { ref, computed } from 'vue';const showAddress = ref(true); // 控制是否显示地址列的开关
const tableData = ref([...]); // 你的数据数组const computedColumns = computed(() => {return [{ prop: 'date', label: '日期', width: 180 },{ prop: 'name', label: '姓名', width: 180 },showAddress.value ? { prop: 'address', label: '地址' } : null // 根据 showAddress 的值决定是否包含地址列].filter(Boolean); // 过滤掉 null 值，即不显示的列
});
</script>

方法3：通过插槽自定义表头内容（更复杂场景）

如果你需要更复杂的表头内容（如合并单元格、自定义渲染等），你可以使用 <el-table> 的 header 插槽。这种方法适用于需要高度自定义表头的情况。

<template><el-table :data="tableData" style="width: 100%"><el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"><template #header><span>{{ column.label }}</span> <!-- 自定义表头内容 --></template></el-table-column></el-table>
</template>

在这个例子中，你可以在 #header 插槽中添加任何自定义的 HTML 或组件，从而实现复杂的表头布局。例如，你可能需要合并某些单元格或者添加额外的按钮和下拉菜单等。这需要你对 Vue 和 Element Plus 有一定的了解，以及对 HTML 和 CSS 有一定的掌握。