Table 表格导出功能

在这里插入图片描述

<Card class="clearfix"><p slot="title"><Icon type="ios-list"></Icon>收入信息</p><!-- 导出1 --><div class="daochu1"><!-- 导出按钮 --><div class="search"><Buttontype="warning"icon="ios-download-outline"@click="exportExcel1"class="searchButton">导出</Button></div><!-- 详细列表 --><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>
// 导出列表头 1queryColumns11: [{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);});});},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247866.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS开发 简单实现视频音频的边下边播

直接切入主题&#xff0c;要实现的功能是&#xff1a;1、ios视频音频边缓存边播放&#xff0c;缓存时可以在已下载的部分拖拽进度条。2、缓存到一半退出&#xff0c;再次播放同一地址的视频时&#xff0c;视频继续下载&#xff0c;并且缓存进度已经走到上一次下载的位置。3、无…

volatile的原理和实现机制

volatile到底如何保证可见性和禁止指令重排序的。 “观察加入volatile关键字和没有加入volatile关键字时所生成的汇编代码发现&#xff0c;加入volatile关键字时&#xff0c;会多出一个lock前缀指令” lock前缀指令实际上相当于一个内存屏障&#xff08;也成内存栅栏&#xff0…

Table城市代码翻译

// data 数据变量 eara&#xff1a;[]// 接口调用 getChinaList() {return fetch({url: "/api/v1/china/city/search",method: "GET"});},// table 栏中的 render 函数 render: (h, params) > {return h("span",this.dictCodesCommon(params.…

iOS中的WiFi与硬件通信

WiFi通信是指手机通过WiFi与外部设备建立连接&#xff0c;并与外部设备进行交互、通信。手机与外部设备的WiFi通信通常是使用Socket来实现的&#xff0c;在这里先介绍一个第三方Socket库&#xff08;CocoaAsyncSocket&#xff09;来实现WiFi通信。 CocoaAsyncSocket支持TCP和U…

MongoDB查询报错:class com.mongodb.MongoSecurityException: Exception authenticating MongoCredential...

异常日志&#xff1a; 2019-05-30 10:10:24,252 [http-nio-8080-exec-1] DEBUG [java.sql.Connection] - ooo Connection Opened 2019-05-30 10:10:24,258 [http-nio-8080-exec-1] DEBUG [java.sql.PreparedStatement] - > Executing: insert into client_config ( appid, …

动态添加后的数据转换 — 后台接收数据

let data this.projectPersonnel.map(item > {let obj {}obj.member item.people.map(info > {return info.id})obj.member JSON.stringify(obj.member)obj.projectId idobj.teamId item.name.idreturn obj})

iOS开发--地图与定位

iOS开发--地图与定位 概览 现在很多社交、电商、团购应用都引入了地图和定位功能&#xff0c;似乎地图功能不再是地图应用和导航应用所特有的。的确&#xff0c;有了地图和定位功能确实让我们的生活更加丰富多彩&#xff0c;极大的改变了我们的生活方式。例如你到了一个陌生的地…

CTO、技术总监、首席架构师的区别

项目经理是项目的直接负责人&#xff0c;这个角色相当于一个中间接口&#xff0c;不管是团队成员还是需求方&#xff08;客户&#xff09;&#xff0c;或者是上级领导&#xff0c;有事都直接找他&#xff0c;所以这个职位着重 于管理与沟通。一般来说&#xff0c;项目经理的工作…

iview组件库 - 穿梭栏设置

<Modalv-model"modal1"title"项目药品上下架维护"width"1020":mask-closable"false"on-ok"addOk()"><Col span"36"><Selectfilterableon-change"onChangeProject"placeholder"请先…

如何优雅地使用Sublime Text3

Sublime Text&#xff1a;一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件&#xff0c;不仅具有华丽的界面&#xff0c;还支持插件扩展机制&#xff0c;用她来写代码&#xff0c;绝对是一种享受。相比于难于上手的Vim&#xff0c;浮肿沉重的Eclipse&#xff0c;VS…

题目:有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13... 求出这个数列的前20项之和。...

题目&#xff1a;有一分数序列&#xff1a;2/1&#xff0c;3/2&#xff0c;5/3&#xff0c;8/5&#xff0c;13/8&#xff0c;21/13... 求出这个数列的前20项之和。 程序分析&#xff1a;请抓住分子与分母的变化规律。 public class 第二十题求数列之和 {public static void mai…

iview 组件 设置头像更换

基于iview 组件 设置头像更换 <!-- 头像更换 --><div style"width: 100%;height:100%;"><div style"height: 100%;"><Upload :on-success"uploadSuccess" :show-upload-list"false" accept"image/png, i…

HTML的target属性中_blank、_self、_parent、_top含义

_blank 浏览器会另开一个新窗口显示链接_self&#xff0c;在同一框架或窗口中打开所链接的文档。 此参数为默认值&#xff0c;通常不用指定。 _parent&#xff0c;将链接的文件载入含有该链接框架的父框架集或父窗口中。 如果含有该链接的框架不是嵌套的&#xff0c;则在浏览…

Windows 聚焦的锁屏壁纸设置为桌面壁纸

需求&#xff1a; Windows的锁屏壁纸偶尔遇到非常喜欢的壁纸&#xff0c;想设置为桌面壁纸。 步骤如下&#xff1a; 1. “Windows 聚焦”的锁屏壁纸都保存在隐藏文件夹 --- Assets里。 a. 打开“资源管理器 b. 在地址栏复制粘贴下方路径后按回车键&#xff0c;即可快速跳转至这…

VUE药监码扫描

<!-- 药监码 --><div class"divContent"><div class"headDiv"><div class"spanA">请扫描相关药监码</div></div><button class"scanBtn" clickscan_img()>扫描药监码</button><bu…

Chrome 控制台的console用法收集

Chrome 控制台console的用法 大家都有用过各种类型的浏览器&#xff0c;每种浏览器都有自己的特色&#xff0c;本人拙见&#xff0c;在我用过的浏览器当中&#xff0c;我是最喜欢Chrome的&#xff0c;因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。…

面向对象思想封装狙击手狙击敌人

需求&#xff1a;狙击手xxx使用xx枪&#xff0c;射击敌人xxx,敌人生命值归0&#xff0c;应声倒下分析设计类&#xff1a; 封装狙击手类 属性&#xff1a; 名字 行为&#xff1a;捡枪   装弹   射击封装枪类 属性&#xff1a; 型号 行为&#xff1a;射击封装弹夹类 属性&…

JavaScript 字符串处理方法总结

变量从字符串转换成int和float型 var weightincrease "2.5kg";undefinedparseInt(weightincrease);2parseFloat(weightincrease);2.5 字符串处理方法var words "鱼神是个帅哥";undefinedwords.length6words.charAt(0);"鱼"words.charAt(words.…

【js】vue 2.5.1 源码学习(二) 策略合并

一、 整体思路1 首先是代码的大体构造&#xff0c;先判断引入代码的环境&#xff0c;即对应amd 和cmd的处理2 vue_init 需要借助 initMinxin >>> // 初始化选项1: 规范 2: 合并策略。3 mergeOptions 选项合并 一个或者多个对象合并&#xff0c;并且生成一个…

解决公众号的加载问题

相关组件内设置的方法&#xff08;方法可以多处组件运用&#xff09; <x-input on-change"changeinp" on-blur"temporaryRepair();" on-enter"temporaryRepair();" name"mobile" :show-clear"false" placeholder"…