el-table动态表头数据渲染
@desc：el-table的数据是后端动态返回的，包括表头的情况下如何进行渲染
// 第一页的数据
{
"code": 1,
"message": "查询成功",
"data": {
"current": 1,
"size": 10,
"total": 41,
"rows": [
{
"typeList": [
"线路类型名称",
"病害类型1",
"病害类型2",
"病害类型3",
"病害类型11"
]
},
{
"typeNumList": [
"111",
"1",
"0",
"0",
"0"
]
},
{
"typeNumList": [
"中国上海市徐汇区虹桥路203号华润大厦28室",
"1",
"0",
"0",
"0"
]
},
{
"typeNumList": [
"中国上海市徐汇区虹桥路976号华润大厦12室",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国上海市浦东新区健祥路195号42栋",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国上海市浦东新区橄榄路555号39号楼",
"1",
"0",
"0",
"0"
]
},
{
"typeNumList": [
"中国上海市闵行区宾川路553号44楼",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国东莞坑美十五巷347号华润大厦44室",
"1",
"0",
"0",
"0"
]
},
{
"typeNumList": [
"中国东莞环区南街二巷979号华润大厦31室",
"0",
"0",
"1",
"0"
]
},
{
"typeNumList": [
"中国东莞珊瑚路30号14室",
"1",
"0",
"0",
"0"
]
},
{
"typeNumList": [
"中国中山乐丰六路888号35号楼",
"0",
"1",
"0",
"0"
]
}
]
}
}// 第二页的数据
{
"code": 1,
"message": "查询成功",
"data": {
"current": 2,
"size": 10,
"total": 41,
"rows": [
{
"typeList": [
"线路类型名称",
"病害类型1",
"病害类型2",
"病害类型3",
"病害类型11"
]
},
{
"typeNumList": [
"中国中山天河区大信商圈大信南路91号36栋",
"1",
"0",
"0",
"0"
]
},
{
"typeNumList": [
"中国北京市东城区东单王府井东街277号17号楼",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国北京市东城区东单王府井东街707号9室",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国北京市東城区東直門內大街635号17栋",
"1",
"0",
"0",
"0"
]
},
{
"typeNumList": [
"中国北京市西城区复兴门内大街214号30栋",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国北京市西城区西長安街606号11栋",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国北京市西城区西長安街922号46栋",
"1",
"0",
"0",
"0"
]
},
{
"typeNumList": [
"中国广州市天河区天河路525号29室",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国广州市海珠区江南西路624号44栋",
"0",
"1",
"0",
"0"
]
},
{
"typeNumList": [
"中国广州市海珠区江南西路764号42室",
"0",
"1",
"0",
"0"
]
}
]
}
}页面效果
准备以下数据
typeTable: [], // 类型表格数据 二维数组 [["王五", "男", "25", "工人"],["赵六", "女", "40", "医生"]],
typeTableHeader: [], // 类型表头 ["姓名", "性别", "年龄", "职业"],
type_column_count: 0,
resTypeTable: [], // 最终的类型表格数据效果实现
分页组件