vue2 使用element-ui table组件以当前月的每天为表头动态生成表

使用element-ui table开发表格时，遇到通过选择的月份 获取月份的每一天为表头，同时后端赋值
此时就需要动态生成表头，因为每月天数不是固定的。

如图：

直接上代码

1. html

<el-table
        id="print"
        v-loading="loading"
        size="mini"
        border
        :max-height="tableHeight"
        :header-cell-style="{ background: '#006fbf', color: '#fff' }"
        :cell-style="addClass"
        :data="tableOldData" >
      <el-table-column label="录入科目" fixed="left" width="200px" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <div>{{ row.decs}}</div>
        </template>
      </el-table-column>
      <el-table-column label="录入口径" width="180px" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <div>{{ row.lrkj }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="this.time.month+1 + '月合计'" width="180px" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <div>{{ row.monthSum == 0 ? '-' : row.monthSum  }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="item.month + '月' + item.day + '日'" v-for="item in visibleCalendar"
                       :key="item.keyDate" width="100">
        <template slot-scope="{row}">
          {{ getDateName(row.dayData,item.keyDate) }}
        </template>
      </el-table-column>
    </el-table>

重点看里

 <el-table-column :label="item.month + '月' + item.day + '日'" v-for="item in visibleCalendar"
                       :key="item.keyDate" width="100">
        <template slot-scope="{row}">
          {{ getDateName(row.dayData,item.keyDate) }}
        </template>
</el-table-column>

通过computed中方法得到当前时间的年月日以及自定义字段名称信息

computed: {
    // 获取当前月份时间日期
    visibleCalendar: function () {
      // 获取今天的年月日
      const today = new Date()
      today.setHours(0)
      today.setMinutes(0)
      today.setSeconds(0)
      today.setMilliseconds(0)

      const calendarArr = []
      // 获取当前月份第一天
      const currentFirstDay = new Date(this.time.year, this.time.month, 1)
      const d = new Date(this.time.year, this.time.month + 1, 0);
      const currentMonthDay = d.getDate()
      // 获取第一天是周几
      const weekDay = currentFirstDay.getDay() === 0 ? 7 : currentFirstDay.getDay()
      // 以当前月份的第一天作为第一天
      const startDay = currentFirstDay.getTime()

      // 利用当前月份一共有多少天来显示日历表头
      for (let i = 0; i < currentMonthDay; i++) {
        const date = new Date(startDay + i * 24 * 3600 * 1000)
        let Y = date.getFullYear() + "-";//年
        let M = (date.getMonth() + 1 < 10  ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";//月
        let D =  (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";//日
        let nowDate = Y + M + D
        //最终返回的数据，包含年月日以及自定义字段	  
        calendarArr.push({
          date: new Date(startDay + i * 24 * 3600 * 1000),
          year: date.getFullYear(),
          month: date.getMonth()+1,
          day: date.getDate(),
          keyDate: nowDate,
        })
      }
      return calendarArr
    }
  },

后端数据赋值的话还需要转换，因为列表头不是固定的需要匹配到后端传过来的数据，此例中根据keyDate来匹配后端的值

    //tableData就是得到的接口返回的数据
    //tableNewData就是通过计算属性得到的最终的渲染表格的数据集合
    //visibleCalendar是在上一步骤中得到的日期时间集合
    //keyDate是日期时间集合里面的一个字段，用来作为判断依据的
    tableNewData: function (){
      const newData = []
      this.tableData.forEach(item => {
        const newItem = { ...item }
        const dayData = newItem.dayData
        newItem.dayData = {}
        this.visibleCalendar.forEach(date => {
          let newData = date.keyDate
          if (dayData[newData]) {
            newItem.dayData[newData] = dayData[newData]
          } else {
            newItem.dayData[newData] = {}
          }
        })
        newData .push(newItem)
      })
      return newData 
    },

后端返回值：

[
    {
        "decs":"①进仓卸货（件）",
        "lrkj":"当日到达仓库完成卸货的件数",
        "dayData":{
            "2023-09-01":{
                "name":"测试1",
                "num":256
            },
            "2023-09-02":{
                "name":"测试1",
                "num":256
            },
            "2023-09-03":{
                "name":"测试1",
                "num":256
            },
            "2023-09-04":{
                "name":"测试1",
                "num":256
            },
            "2023-09-05":{

            },
            "2023-09-06":{

            },
            "2023-09-07":{

            },
            "2023-09-08":{

            },
            "2023-09-09":{

            },
            "2023-09-10":{

            },
            "2023-09-11":{

            },
            "2023-09-12":{

            },
            "2023-09-13":{

            },
            "2023-09-14":{

            },
            "2023-09-15":{

            },
            "2023-09-16":{

            },
            "2023-09-17":{

            },
            "2023-09-18":{

            },
            "2023-09-19":{

            },
            "2023-09-20":{

            },
            "2023-09-21":{

            },
            "2023-09-22":{

            },
            "2023-09-23":{

            },
            "2023-09-24":{

            },
            "2023-09-25":{

            },
            "2023-09-26":{

            },
            "2023-09-27":{

            },
            "2023-09-28":{

            },
            "2023-09-29":{

            },
            "2023-09-30":{

            }
        }
    },
    {
        "decs":"①进仓卸货（件）",
        "lrkj":"当日到达仓库完成卸货的件数",
        "dayData":{
            "2023-09-02":{
                "name":"测试2",
                "num":223
            }
        }
    },
    {
        "decs":"①进仓卸货（件）",
        "lrkj":"当日到达仓库完成卸货的件数",
        "dayData":{
            "2023-09-03":{
                "name":"测试3",
                "num":456
            }
        }
    }
]

注意scope中getDateName方法，因为传进来的是对象，需要根据日期获取其中的具体值
其中参数scope就是

"2023-09-03":{
                "name":"测试3",
                "num":456
            }

参数s就是keyDate的值

    /** 格式化并赋值 */
    getDateName(scope,s){
      return  scope[s].dataNum
    },

以上过程查阅网上教程并自己优化得到。