vue element-ui表格组件动态多级表头
由于统计维度是可变化的(它可以是省市也可以是区县),所以需要专门设置一个表格的数据来保存表头,然后通过v-for="item in tableColData"的方式来循环展示表头,由于省市是循环展示表头数据的,所以如果省市里面如果有第二级别的表头,就需要在表头数据多设置一级children,加上第二层v-for="item1 in item.children"来遍历二级表头。需要注意的是每个数据的
·
实际项目的需求,需要根据后端动态获取的方式来初始化表格的表头包含哪些信息,且有很多信息是有规律的,所以我们需要Element UI动态生成多级表头。需要的效果图如下:
由于统计维度是可变化的(它可以是省市也可以是区县),所以需要专门设置一个表格的数据来保存表头,然后通过v-for="item in tableColData"的方式来循环展示表头,由于省市是循环展示表头数据的,所以如果省市里面如果有第二级别的表头,就需要在表头数据多设置一级children,加上第二层v-for="item1 in item.children"来遍历二级表头。代码如下:
<el-table
:cell-class-name="addClass"
class="table_style"
:data="tableData9"
:header-cell-style="{
backgroundColor: 'rgba(3,39,85,0.92)',
color: '#BADCFF',
fontSize: '16px',
textAlign: 'center',
}"
:cell-style="{
color: '#fff',
backgroundColor: 'transparent',
fontSize: '16px',
textAlign: 'center',
}"
:row-style="{
color: '#fff',
backgroundColor: 'transparent',
fontSize: '16px',
textAlign: 'center',
}"
style="width: 100%"
max-height="252"
>
<el-table-column
v-for="item in tableColData"
width="180px"
:prop="item.id"
:label="item.name"
:key="item.id"
:fixed="item.fixed"
>
<el-table-column
width="180px"
v-for="item1 in item.children"
:prop="item1.id"
:label="item1.name"
:key="item1.id"
>
</el-table-column>
</el-table-column>
</el-table>
表头数据格式如下:
[{
"id": "wd",
"name": "时间维度"
},
{
"id": "qu1",
"name": "贵池区",
"children": [
{
"id": "qu1-dy",
"name": "当月"
},
{
"id": "qu1-dyzz",
"name": "当月增长"
},
{
"id": "qu1-lj",
"name": "累计"
},
{
"id": "qu1-ljzz",
"name": "累计增长"
}
]
},
{
"id": "qu2",
"name": "东至县",
"children": [
{
"id": "qu2-dy",
"name": "当月"
},
{
"id": "qu2-dyzz",
"name": "当月增长"
},
{
"id": "qu2-lj",
"name": "累计"
},
{
"id": "qu2-ljzz",
"name": "累计增长"
}
]
}]
表内数据如下:
[
{
"wd": "2月",
"qu1-dy": "43.4",
"qu1-dyzz": "-1.9%",
"qu1-lj": "159.9",
"qu1-ljzz": "-14.7%",
"qu2-dy": "43.3",
"qu2-dyzz": "-1.9%",
"qu2-lj": "159.9",
"qu2-ljzz": "-14.7%"
},
]
需要注意的是每个数据的字段需要和表头id对应上.
更多推荐
已为社区贡献3条内容
所有评论(0)