el-table 根据筛选条件时间范围动态展示列

问题背景：

根据时间筛选，时间范围内的每一天都为一列，表格动态展示数据。

返回前端的数据格式：

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>