vue列表中日期数据渲染和导出

列表中的日期数据（包括prop，如第一天的“1”转换成“D1”，）从接口获取，最终调用xlsx导出列表日期数据。

template中：

<div style="text-align: right; margin-right: 30px">
        <el-radio-group v-model="radio1" @change="onlyTodaySearch">
          <el-radio-button :label="2">只看今天</el-radio-button>
          <el-radio-button :label="3">导出</el-radio-button>
        </el-radio-group>
      </div>

      <el-table height="580" :data="list" border>
        <el-table-column fixed label="序号" type="index" width="50"></el-table-column>

        <template v-for="(v, i) in this.head">
          <el-table-column :key="i + v.prop" :prop="v.prop" :label="v.label" :fixed="v.fixed" width="120"
            v-if="v.prop != total">
          </el-table-column>
          <el-table-column :key="i + v.prop" :prop="v.prop" :label="v.label" width="120" sortable v-else>
          </el-table-column>
        </template>
      </el-table>

import myXLSX from "xlsx";

需要导入xlsx，

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

methods: {

    // 只看今天与导出的切换
    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: "",
          closer_name: this.valueIt,
        };
        bug.BugCloseShowByDate(params).then((res) => {
          let bdl = [];
          for (let v of res.data.Bug_detail_list) {
            let temp = {
              closer: v.closer,
              total: v.total,
            };
            for (let d of v.Bug_close_data_by_date) {
              temp['D' + d.date] = d.num;
            }
            bdl.push(temp);
          }
          this.list = bdl;
        });
      } else if (buttonSelected == 3) {
        // 执行导出的接口请求
        this.$confirm("是否导出当前页面的数据?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then((response) => {
          let outputTableRecord = [
            [
              "序号",
              "Bug关闭人",
              "Bug关闭总数",
              "D1",
              "D2",
              "D3",
              "D4",
              "D5",
              "D6",
              "D7",
              "D8",
              "D9",
              "D10",
              "D11",
              "D12",
              "D13",
              "D14",
              "D15",
              "D16",
              "D17",
              "D18",
              "D19",
              "D20",
              "D21",
              "D22",
              "D23",
              "D24",
              "D25",
              "D26",
              "D27",
              "D28",
              "D29",
              "D30",
              "D31",
            ], // 表头
          ];
          // console.log(this.list)
          this.list.forEach((item, index) => {
            let rowData = [];
            // 导出的行内容
            rowData = [
              index + 1,
              item.closer,
              item.total,
              item.D1,
              item.D2,
              item.D3,
              item.D4,
              item.D5,
              item.D6,
              item.D7,
              item.D8,
              item.D9,
              item.D10,
              item.D11,
              item.D12,
              item.D13,
              item.D14,
              item.D15,
              item.D16,
              item.D17,
              item.D18,
              item.D19,
              item.D20,
              item.D21,
              item.D22,
              item.D23,
              item.D24,
              item.D25,
              item.D26,
              item.D27,
              item.D28,
              item.D29,
              item.D30,
              item.D31,
            ];
            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;
    },

    BugCloseShowByDate() {
      let params = {
        date_bug_close_start: this.tiem[0] || "",
        date_bug_close_end: this.tiem[1] || "",
        closer_name: this.valueIt,
      };
      bug.BugCloseShowByDate(params).then((res) => {
        let bdl = [];
        let head = [];
        head.push({ prop: "closer", label: "Bug关闭人", fixed: "fixed" });
        head.push({ prop: "total", label: "Bug关闭总数", fixed: "fixed" });
        for (let i = 1; i < 32; i++) {
          head.push({ prop: 'D' + i + "", label: i + "" });
        }
        this.head = head;
        for (let v of res.data.Bug_detail_list) {
          let temp = {
            closer: v.closer,
            total: v.total,
          };

          for (let d of v.Bug_close_data_by_date) {
            temp['D' + d.date] = d.num;
          }
          bdl.push(temp);
        }
        this.list = bdl;
      });
    },
  },