@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: [], // 最终的类型表格数据
效果实现
/* 类型表格 */
typeTable: [], // 类型表格数据 二维数组 [["王五", "男", "25", "工人"],["赵六", "女", "40", "医生"]],
typeTableHeader: [], // 类型表头 ["姓名", "性别", "年龄", "职业"],
type_column_count: 0,
resTypeTable: [], // 最终的类型表格数据
/* 类型表格 */
getTypeTable() {
this.typeLoading = true;
lineType({
pageNum: this.paginationConfig.pageNum,
pageSize: this.paginationConfig.pageSize,
startTime: this.paginationConfig.dateTime[0] || null,
endTime: this.paginationConfig.dateTime[1] || null,
lineName: this.paginationConfig.lineName || null,
}).then((res) => {
/* 获取 typeTable typeTableHeader type_column_count 处理前所需的数据 */
this.typeTableHeader = [];
this.typeTable = [];
this.resTypeTable = [];
this.typeTableHeader = res.data.rows[0]?.typeList;
if (res.data.rows.length > 1) {
res.data.rows.forEach((item, index) => {
if (index !== 0) {
this.typeTable.push(item.typeNumList);
}
});
}
/* 获取 typeTable typeTableHeader type_column_count 处理前所需的数据 */
/* 处理数据 获取 resTypeTable */
this.column_count = this.typeTableHeader.length;
for (let i = 0; i < this.typeTable.length; i++) {
let row_data = this.typeTable[i];
let row_dict = {};
for (let j = 0; j < this.column_count; j++) {
row_dict[this.typeTableHeader[j]] = row_data[j];
}
this.resTypeTable.push(row_dict);
}
/* 处理数据 获取 resTypeTable */
this.total = res.data.total;
this.typeLoading = false;
});
},
分页组件