vue列表中时间段数据渲染和导出

列表中的时间段数据（包括prop，如“8:00~9:00”转换成“th8”，）从接口获取，最终调用xlsx导出列表时间段数据。

import myXLSX from "xlsx";

需要导入xlsx，

script中的只看今天、导出，搜索方法：

methods: {

    BugCloseTimeSlotShow() {
      let h = [];

      h.push(
        {
          prop: "closer",
          label: "Bug关闭人",
          fixed: "fixed",
        },
        {
          prop: "total",
          label: "Bug关闭总数",
          fixed: "fixed",
        }
      );

      let params = {
        date_bug_close_start: this.tiem2[0] || "",
        date_bug_close_end: this.tiem2[1] || "",
        closer_name: this.valueIt2,
        // executor_name: this.execP2,
      };
      bug.BugCloseTimeSlotShow(params).then((res) => {
        let arr = [];
        for (let v of res.data.Bug_detail_list) {
          let d = {
            closer: v.closer,
            total: v.total,
          };
          for (let dd of v.data_distribute) {
            let str = dd.timeSlot;
            //取：前的字符做prop，以供导出
            str = str.match(/(\S*):/)[1];
            d['th' + str] = dd.num;
          }
          arr.push(d);
        }
        let v = res.data.Bug_detail_list[0].data_distribute;
        for (let i = 0; i < v.length; i++) {
          let str = v[i].timeSlot;
          //取：前的字符做prop，以供导出
          str = str.match(/(\S*):/)[1];
          h.push({
            prop: 'th' + str,
            label: v[i].timeSlot,
          });
        }
        this.head2 = h;
        this.list2 = arr;
      });
    },

    // 只看今天与导出的切换
    onlyTodaySearch(buttonSelected) {
      if (buttonSelected == 2) {
        let todayData = new Date();
        let dateValue =
          todayData.getFullYear() +
          "-" +
          (todayData.getMonth() + 1) +
          "-" +
          todayData.getDate() +
          " " +
          "00:00:00";
        let params = {
          date_bug_close_start: dateValue,
          date_bug_close_end: "",
          close_name: this.valueIt2,
        };
        bug.BugCloseTimeSlotShow(params).then((res) => {
          let arr = [];
          for (let v of res.data.Bug_detail_list) {
            let d = {
              closer: v.closer,
              total: v.total,
              // project_name: v.project_name,
            };
            for (let dd of v.data_distribute) {
              let str = dd.timeSlot;
              //取：前的字符做prop，以供导出
              str = str.match(/(\S*):/)[1];
              d['th' + str] = dd.num;
            }
            arr.push(d);
          }
          this.list2 = arr;
        });
      } else if (buttonSelected == 3) {
        // 执行导出的接口请求
        this.$confirm("是否导出当前页面的数据?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then((response) => {
          let outputTableRecord = [
            [
              "序号",
              "Bug创建人",
              "Bug创建总数",
              "8:00 ~ 9:00",
              "9:00 ~ 10:00",
              "10:00 ~ 11:00",
              "11:00 ~ 12:00",
              "12:00 ~ 13:30",
              "13:30 ~ 14:30",
              "14:30 ~ 15:30",
              "15:30 ~ 16:30",
              "16:30 ~ 17:30",
              "17:30 ~ 18:30",
              "18:30 ~ 19:30",
              "19:30 ~ 20:30",
              "20:30 ~ 21:30",
              "21:30 ~ 22:30",
              "22:30 ~ 8:00",
            ], // 表头
          ];
          this.list.forEach((item, index) => {
            let rowData = [];
            // 导出的行内容
            rowData = [
              index + 1,
              item.closer,
              item.total,
              item.th8,
              item.th9,
              item.th10,
              item.th11,
              item.th12,
              item.th13,
              item.th14,
              item.th15,
              item.th16,
              item.th17,
              item.th18,
              item.th19,
              item.th20,
              item.th21,
              item.th22,
            ];
            outputTableRecord.push(rowData);
          });
          // console.log(outputTableRecord);
          let workSheet = myXLSX.utils.aoa_to_sheet(outputTableRecord); // 创建工作薄
          let bookNew = myXLSX.utils.book_new();
          myXLSX.utils.book_append_sheet(bookNew, workSheet, "Bug关闭-时段分布数据"); // 工作簿名称
          let fileName = "Bug关闭-时段分布数据" + "_" + this.timeFormat() + ".xlsx";
          myXLSX.writeFile(bookNew, fileName);
        });
      }
    },
    timeFormat() {
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minutes = time.getMinutes();
      let seconds = time.getSeconds();
      return (
        year +
        "-" +
        this.addZero(month) +
        "-" +
        this.addZero(date) +
        " " +
        this.addZero(hours) +
        ":" +
        this.addZero(minutes) +
        ":" +
        this.addZero(seconds)
      );
    },
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },
  },