Table 表格导出功能
生活随笔
收集整理的這篇文章主要介紹了
Table 表格导出功能
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<Card class="clearfix"><p slot="title"><Icon type="ios-list"></Icon>收入信息</p><!-- 導(dǎo)出1 --><div class="daochu1"><!-- 導(dǎo)出按鈕 --><div class="search"><Buttontype="warning"icon="ios-download-outline"@click="exportExcel1"class="searchButton">導(dǎo)出</Button></div><!-- 詳細(xì)列表 --><Tableref="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>
// 導(dǎo)出列表頭 1queryColumns11: [{title: "項(xiàng)目名稱",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: "年度累計(jì)",key: "monthAmount13",align: "center",width: 200,},{title: "更新時(shí)間",key: "updateTime",align: "center",width: 200,},],
//導(dǎo)出收入信息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 = "藥品服務(wù)費(fèi)收入";}if (item.revenueType == "3") {item.revenueType = "特藥服務(wù)費(fèi)收入";}if (item.revenueType == "4") {item.revenueType = "直保經(jīng)紀(jì)費(fèi)";}if (item.revenueType == "5") {item.revenueType = "再保經(jīng)紀(jì)費(fèi)";}if (item.revenueType == "6") {item.revenueType = "廣告費(fèi)";}for (const key in item.monthAmount) {item.monthAmount13 += item.monthAmount[key];}});this.excel = response.result;this.excell = this.excel;// 導(dǎo)出方法 利用Vue 的 ref 獲取所需的dom節(jié)點(diǎn)進(jìn)行方法設(shè)置this.$refs.table.exportCsv({//導(dǎo)出文件標(biāo)題filename: "收入信息",//導(dǎo)出文件集合(內(nèi)容)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);});});},
總結(jié)
以上是生活随笔為你收集整理的Table 表格导出功能的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Vue项目中Table设置 render
- 下一篇: Table城市代码翻译