element 列表动态生成表头天数以及数据

原型图如下： 

 点击查询时根据当前的月份动态生成右侧的天数并填充数据

左侧通过合并列来实现

首先获取当前月份中有多少天：

使用day.js库一行代码搞定

 // 当前月份有多少天
 this.totalDay = dayjs(this.queryParams.date).daysInMonth()

根据后端接口请求的数据前端在进行数据重构：

let obj = []
      data.map(item => {
      // spaceRatioList： 当前行内数据是否需要填充
        if (item.spaceRatioList && item.spaceRatioList.length > 0) {
          //去重判断要插入多少时间段
          const res = new Map()
          // dateRange 为时间字段 
          let itemList = item.spaceRatioList.filter((a) => !res.has(a.dateRange) && res.set(a.dateRange, 1))
          for (let i = 0; i < itemList.length - 1; i++) {
            let newdata =
              {
                userDepartment: item.userDepartment,
                equipmentClass: item.equipmentClass,
                equipmentModel: item.equipmentModel,
                equipmentName: item.equipmentName,
                equipmentNumber: item.equipmentNumber,
                id: item.id,
                loseCalibrationDate: item.loseCalibrationDate,
                nextCalibrationDate: item.nextCalibrationDate,
                range: item.range,
                status: item.status,
                spaceRatioList:item.spaceRatioList,
                dateRange: itemList[i].dateRange,
                monthList: []
              }
            for (let i = 1; i <= this.totalDay; i++) {
              //查询当前天数是否有空间利用率
              let obj = newdata.spaceRatioList.filter(item => {
                // startDate 第几天 dateRange 为时间字段 
                return item.startDate === i.toString() && item.dateRange === newdata.dateRange // 查找是否有相同的天数值
              })
              // 根据当前月的天数添加
              if (obj.length > 0) {
                newdata.monthList.push({
                  label: `第${i}天`,
                  value: obj[0].spaceRatio + '%'
                })
              }else {
                newdata.monthList.push({
                  label: `第${i}天`,
                  value: '0%'
                })
              }
            }
            obj.push(newdata)
          }
        } else {
          let newdata =
            {
              userDepartment: item.userDepartment,
              equipmentClass: item.equipmentClass,
              equipmentModel: item.equipmentModel,
              equipmentName: item.equipmentName,
              equipmentNumber: item.equipmentNumber,
              id: item.id,
              loseCalibrationDate: item.loseCalibrationDate,
              nextCalibrationDate: item.nextCalibrationDate,
              range: item.range,
              status: item.status,
              spaceRatioList: item.spaceRatioList,
              dateRange: '',
              monthList: []
            }
          for (let i = 1; i <= this.totalDay; i++) {
            newdata.monthList.push({
              label: `第${i}天`,
              value: '0%'
            })
          }
          obj.push(newdata)
        }
      })
      this.listData = obj

 

<el-table
              stripe
              border
              v-loading="loading"
              :data="listData"
              :span-method="mergeMethod"
              :cell-class-name="changeClassName"
            >
                ...
              <el-table-column v-for="(item,index) in totalDay" :label="'第' + item + '天'" align="center">
                <template slot-scope="scope">
                  {{checkData(scope.row,item)}}
                </template>
              </el-table-column>
            </el-table>

 checkData(row,index) {
      // 从0开始取所以要减1
      return row.monthList[index-1].value
    },

最后即可实现动态生成表头与数据效果，代码还有很大的优化空间