技術標籤：前端網頁小專案html

<Card class="clearfix">
          <p slot="title">
            <Icon type="ios-list"></Icon>
            收入資訊
          </p>
          <!-- 匯出1 -->
          <div class="daochu1">
            <!-- 匯出按鈕 -->
 

            <div class="search">
              <Button
                type="warning"
                icon="ios-download-outline"
                @click="exportExcel1"
                class="searchButton"
                >匯出</Button
              >
 

            </div>
            <!-- 詳細列表 -->
            <Table
              ref="table"
              border
              :row-class-name="rowClassName"
              :columns="queryColumns1"
              :data="queryinfoList1"
              style
 
="width: 100%; top: 10px"
              @on-sort-change="sortTime"
            >
            </Table>
          </div>
          <!-- 分頁 -->
          <div style="margin-top: 20px; overflow: hidden">
            <div style="float: right">
              <Page
                :total="count"
                show-elevator
                @on-change="onchangePage"
              ></Page>
            </div>
          </div>
        </Card>

// 匯出列表頭 1
      queryColumns11: [
        {
          title: "專案名稱",
          key: "projectName",
          align: "center",
          width: 200,
        },
        {
          title: "收入型別",
          key: "revenueType",
          align: "center",
          width: 150,
        },
        {
          title: "年度",
          key: "year",
          align: "center",
          width: 150,
        },
        {
          title: "1月",
          key: "monthAmount1",
          align: "center",
          width: 150,
        },
        {
          title: "2月",
          key: "monthAmount2",
          align: "center",
          width: 150,
        },
        {
          title: "3月",
          key: "monthAmount3",
          align: "center",
          width: 150,
        },
        {
          title: "4月",
          key: "monthAmount4",
          align: "center",
          width: 150,
        },
        {
          title: "5月",
          key: "monthAmount5",
          align: "center",
          width: 150,
        },
        {
          title: "6月",
          key: "monthAmount6",
          align: "center",
          width: 150,
        },
        {
          title: "7月",
          key: "monthAmount7",
          align: "center",
          width: 150,
        },
        {
          title: "8月",
          key: "monthAmount8",
          align: "center",
          width: 150,
        },
        {
          title: "9月",
          key: "monthAmount9",
          align: "center",
          width: 150,
        },
        {
          title: "10月",
          key: "monthAmount10",
          align: "center",
          width: 150,
        },
        {
          title: "11月",
          key: "monthAmount11",
          align: "center",
          width: 150,
        },
        {
          title: "12月",
          key: "monthAmount12",
          align: "center",
          width: 150,
        },
        {
          title: "年度累計",
          key: "monthAmount13",
          align: "center",
          width: 200,
        },
        {
          title: "更新時間",
          key: "updateTime",
          align: "center",
          width: 200,
        },
      ],

 //匯出收入資訊
    exportExcel1() {
      this.$Spin.show({
        render: (h) => {
          return h("div", [
            h("Icon", {
              class: "demo-spin-icon-load",
              props: {
                type: "load-c",
                size: 50,
              },
            }),
            h("div", "努力記載中...."),
          ]);
        },
      });
      this.excell = [];
      new Promise((resolve, reject) => {
        ApiDrug.exportincomeExport({})
          .then((response) => {
            let res = response.result;
            res.forEach((item, index) => {
              item.monthAmount1 = item.monthAmount["1"];
              item.monthAmount2 = item.monthAmount["2"];
              item.monthAmount3 = item.monthAmount["3"];
              item.monthAmount4 = item.monthAmount["4"];
              item.monthAmount5 = item.monthAmount["5"];
              item.monthAmount6 = item.monthAmount["6"];
              item.monthAmount7 = item.monthAmount["7"];
              item.monthAmount8 = item.monthAmount["8"];
              item.monthAmount9 = item.monthAmount["9"];
              item.monthAmount10 = item.monthAmount["10"];
              item.monthAmount11 = item.monthAmount["11"];
              item.monthAmount12 = item.monthAmount["12"];
              item.monthAmount13 = 0;
              if (item.revenueType == "2") {
                item.revenueType = "藥品服務費收入";
              }
              if (item.revenueType == "3") {
                item.revenueType = "特藥服務費收入";
              }
              if (item.revenueType == "4") {
                item.revenueType = "直保經紀費";
              }
              if (item.revenueType == "5") {
                item.revenueType = "再保經紀費";
              }
              if (item.revenueType == "6") {
                item.revenueType = "廣告費";
              }
              for (const key in item.monthAmount) {
                item.monthAmount13 += item.monthAmount[key];
              }
            });
            this.excel = response.result;
            this.excell = this.excel;
            //   匯出方法   利用Vue 的 ref 獲取所需的dom節點進行方法設定
            this.$refs.table.exportCsv({
            //匯出檔案標題
              filename: "收入資訊",
              //匯出檔案集合（內容）
              columns: this.queryColumns11.filter(
                (col, index) => index < 100000
              ),
              data: this.excel.filter((data, index) => index < 100000),
            });
            this.$Spin.hide();
            resolve();
          })
          .catch((error) => {
            this.$Spin.hide();
            reject(error);
          });
      });
    },