vxe-table按月份循环生成分组表头
时间: 2023-07-12 15:43:42 浏览: 119
您可以使用 `vxe-table` 的 `renderHeader` 方法来循环生成分组表头,具体实现方法如下:
1. 在 `data` 中定义表头数据,包括表头名称和每个月份对应的数据字段名:
```javascript
data() {
return {
columns: [
{
title: '基本信息',
children: [
{ title: '姓名', key: 'name' },
{ title: '年龄', key: 'age' },
],
},
{
title: '收入信息',
children: [
{ title: '1月', key: 'month_1' },
{ title: '2月', key: 'month_2' },
{ title: '3月', key: 'month_3' },
// ... 其他月份
],
},
// ... 其他分组
],
data: [
{ name: '张三', age: 20, month_1: 100, month_2: 200, month_3: 300 },
{ name: '李四', age: 25, month_1: 150, month_2: 250, month_3: 350 },
// ... 其他数据
]
}
}
```
2. 使用 `renderHeader` 方法循环生成分组表头,代码如下:
```javascript
<template>
<vxe-table :columns="columns" :data="data" :render-header="renderHeader"></vxe-table>
</template>
<script>
export default {
methods: {
renderHeader({ column }) {
if (column.children && column.children.length > 0) {
return column.title
} else {
const month = parseInt(column.title) // 获取月份
return `${month}月`
}
}
}
}
</script>
```
这样就可以按照月份循环生成分组表头了。
阅读全文