Table 表格导出功能

在这里插入图片描述

<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);
          });
      });
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑白两客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值