问题背景:
根据时间筛选,时间范围内的每一天都为一列,表格动态展示数据。
返回前端的数据格式:
return了一个DTO;
DTO中有两个属性,一个为LinkedHashMap<String.String>的header,其储存el-table的第一行列名。另一个为List<LinkedHashMap<String, Object>>的dataTable,其储存每一行的数据。
public class ArrayTableNewDTO extends MonitorBaseDTO implements Serializable {
/**
* 表格的头,也就是header
*/
private LinkedHashMap<String, String> header;
/**
* 表格的数据
*/
private List<LinkedHashMap<String, Object>> dataTable;
}
header:
data1: "2022-11-06"
data2: "2022-11-07"
data3: "2022-11-08"
data4: "2022-11-09"
data5: "2022-11-10"
data6: "2022-11-11"
data7: "2022-11-12"
data8: "2022-11-13"
projectName: "项目名"
dataTable: Array(42)
0:
data1: 4
data2: 0
data3: 4
data4: 4
data5: 4
data6: 0
data7: 4
data8: 0
projectName: "BPM"
解决方案:
el-table 绑定数据 tableData ; el-table-column 循环 tableHeader中的;
<el-table :data="tableData" style="width: 100%">
<el-table-column
:prop="index"
:label="item"
show-overflow-tooltip
v-for="(item, index) in tableHeader"
:key="index"
sortable>
</el-table-column>
</el-table>
如若数据需要排序、过滤、加链接:
index里的数据为每一个列名
<template slot-scope="scope" >
<div v-if="index == 'projectName'">
<el-link
type="primary"
@click="getDeepData(scope.row.projectName)" >
{{scope.row[index]}}
</el-link>
</div>
<div v-else>
{{scope.row[index]}}
</div>
</template>