el-table 月份是个数组,表头需按数据中的月份展示
时间: 2024-04-15 19:28:13 浏览: 13
如果您希望 el-table 的表头按照数据中的月份展示,您可以动态生成 el-table-column,并设置表头的文本为月份数组中的对应值。
以下是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column v-for="month in months" :key="month" :label="month">
<template slot-scope="scope">
{{ scope.row.months.includes(month) ? '√' : '' }}
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: "张三", months: ["一月", "二月", "三月"] },
{ name: "李四", months: ["四月", "五月", "六月"] },
],
months: ["一月", "二月", "三月", "四月", "五月", "六月"],
};
},
};
</script>
```
在上述示例中,我们通过 v-for 遍历 months 数组来动态生成 el-table-column。每个 el-table-column 的表头文本都设置为对应的月份。在每个单元格中,我们使用条件判断来确定是否应该显示一个特殊的标记(例如√),以表示该行的数据包含了对应的月份。
请根据您的实际需求调整代码,并确保 months 数组与数据中的月份对应。