vxe-table如何设置多级表头,代码展示,至少5种方式展示
时间: 2023-03-31 14:01:29 浏览: 162
您好,关于vxe-table如何设置多级表头,以下是5种展示方式:
1. 使用columns属性,设置多个children属性,每个children属性对应一个子表头,示例代码如下:
```
columns: [
{
title: '一级表头',
children: [
{
title: '二级表头1',
children: [
{
title: '三级表头1'
},
{
title: '三级表头2'
}
]
},
{
title: '二级表头2',
children: [
{
title: '三级表头3'
},
{
title: '三级表头4'
}
]
}
]
}
]
```
2. 使用表头插槽,自定义表头内容,示例代码如下:
```
<template #table-header="{ $table }">
<thead>
<tr>
<th rowspan="2">一级表头</th>
<th colspan="2">二级表头1</th>
<th colspan="2">二级表头2</th>
</tr>
<tr>
<th>三级表头1</th>
<th>三级表头2</th>
<th>三级表头3</th>
<th>三级表头4</th>
</tr>
</thead>
</template>
```
3. 使用表格配置项,设置headerColgroup属性,示例代码如下:
```
headerColgroup: [
{
colspan: 2,
rowspan: 2
},
{
colspan: 2,
title: '二级表头1'
},
{
colspan: 2,
title: '二级表头2'
},
{
title: '三级表头1'
},
{
title: '三级表头2'
},
{
title: '三级表头3'
},
{
title: '三级表头4'
}
]
```
4. 使用表格配置项,设置headerRows属性,示例代码如下:
```
headerRows: [
[
{
colspan: 2,
rowspan: 2,
title: '一级表头'
},
{
colspan: 2,
title: '二级表头1'
},
{
colspan: 2,
title: '二级表头2'
}
],
[
{
title: '三级表头1'
},
{
title: '三级表头2'
},
{
title: '三级表头3'
},
{
title: '三级表头4'
}
]
]
```
5. 使用表格配置项,设置headerRows和headerColgroup属性,示例代码如下:
```
headerRows: [
[
{
colspan: 2,
rowspan: 2,
title: '一级表头'
},
{
colspan: 2,
title: '二级表头1'
},
{
colspan: 2,
title: '二级表头2'
}
],
[
{
title: '三级表头1'
},
{
title: '三级表头2'
},
{
title: '三级表头3'
},
{
title: '三级表头4'
}
]
],
headerColgroup: [
{
title: '一级表头',
colspan: 2,
rowspan: 2
},
{
title: '二级表头1',
colspan: 2
},
{
title: '二级表头2',
colspan: 2
},
{
title: '三级表头1'
},
{
title: '三级表头2'
},
{
title: '三级表头3'
},
{
title: '三级表头4'
}
]
```
希望以上回答能够帮到您,谢谢!