vue 导出el-table选择的数据使用笔记

1、安装

cnpm i vue-json-excel --save

2、使用

1、引入

import JsonExcel from 'vue-json-excel'

2、注册

components: {downloadExcel:JsonExcel,},

3、页面使用

data：{return {excelName:`每日火化量统计${new Date().valueOf()}.xls`,json_fields:{"类型":'类型',"合计":'合计',},}
}

<el-form-item><download-excelclass = "export-excel-wrapper"v-if="multipleSelection.length > 0":data="multipleSelection":fields="json_fields":name ='excelName'><el-button type="primary" >导出Excel</el-button></download-excel><el-button v-else type="primary"   @click="openExecl">导出Excel</el-button></el-form-item>

3、页面代码

<template><div class="dailyCremationVolume  h100" v-loading="loading"><div class="PageContent"><el-form :model="ruleForm" :inline="true" label-width="80px" class="PageItem PageItems margintop20"><el-row :gutter="5" ref="fileSearch" class="fileSearch"><el-form-item label="结算日期:"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.staTime"format="yyyy-MM-dd" ></el-date-picker>-<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.endTime"format="yyyy-MM-dd" ></el-date-picker></el-form-item><el-form-item><el-button type="primary"  @click="onSubmit('search')">查询</el-button></el-form-item><el-form-item><download-excelclass = "export-excel-wrapper"v-if="multipleSelection.length > 0":data="multipleSelection":fields="json_fields":name ='excelName'><el-button type="primary" >导出Excel</el-button></download-excel><el-button v-else type="primary"   @click="openExecl">导出Excel</el-button></el-form-item></el-row><el-tableref="filetable"id="res_table":data="tableData":header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"stripe:height="tableHeight"@selection-change="handleSelectionChange"border><el-table-columntype="selection"v-if="tableData.length > 0"width="55"></el-table-column><el-table-column:prop="item"align='center':label="item":key="item"v-for="item in columns"></el-table-column></el-table></el-form></div></div>
</template><script>import * as Type from '@/api/service'import {dataFormatetmd} from '@/utils/index'import FileSaver from "file-saver";import XLSX from "xlsx";import download from "@/api/download"import JsonExcel from 'vue-json-excel'export default {name: "dailyCremationVolume",components: {downloadExcel:JsonExcel,},data() {return {excelName:`每日火化量统计${new Date().valueOf()}.xls`,json_fields:{"类型":'类型',"合计":'合计',},loading: false,dictionary:{},multipleSelection: [],tableHeight: 0,type: [],ruleForm: {staTime:new Date(),endTime:new Date(),},pager: {pageSize: 20,total: 1,currentPage: 1},tableData: [],keys:[],columns:[]//按钮权限}},created () {},//载入按钮mounted() {this.$store.dispatch("user/getdictionary").then((res) => {this.dictionary=res})this.btnRight = this.$route.meta.buttons;//遍历属性赋值将true与false字符串转换成布尔型的值for (let key of Object.keys(this.btnRight)) {this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;}this.onSubmit()var that = thiswindow.onresize = function () {var search = document.getElementsByClassName("fileSearch")[0].offsetHeightvar dom = document.getElementsByClassName("PageContent")[0].offsetHeightthat.tableHeight = dom - search - 60}},//注销window.onresize事件destroyed() {window.onresize = null;},updated() {this.$nextTick(() => {var dom = document.getElementsByClassName("PageContent")[0].offsetHeightvar search = document.getElementsByClassName("fileSearch")[0].offsetHeightthis.tableHeight = dom - search - 80})},methods: {handleSelectionChange(val) {this.multipleSelection = val;},async onSubmit() {this.loading = truethis.json_fields={"类型":'类型',"合计":'合计',}var postData = {staTime:this.ruleForm.staTime?this.$dayjs(new Date(this.ruleForm.staTime)).format('YYYY-MM-DD'):'',endTime:this.ruleForm.endTime?this.$dayjs(new Date(this.ruleForm.endTime)).format('YYYY-MM-DD'):'',}//查询火化档案的接口let res = await Type['loadDailyStatisticsData'](postData)this.loading=false;if(res.code!==1) return this.$message.error(res.message)if(res.data){this.tableData = res.data.val;this.columns = res.data.keys;res.data.keys.forEach((item,index)=>{console.log(item,'0')this.json_fields[item] = res.data.keys[index]})}else{this.tableData=[]}},//加法plus(){let r1, r2, mtry{r1 = arguments[0].toString().split(".")[1].length}catch(e){r1 = 0}try{r2 = arguments[1].toString().split(".")[1].length}catch(e){r2 = 0}m = Math.pow(10,Math.max(r1,r2))if(arguments.length > 2) {return this.plus((arguments[0] * m + arguments[1] * m) / m, ...(Array.from(arguments).slice(2)))}else{return ((arguments[0] * m + arguments[1] * m) / m).toFixed(2)}},transformData(data) {const keys = Object.keys(data);const values = Object.values(data);console.log(values,'7411')this.keys=values[0].lengthconst result = [];for (let i = 0; i < values.length; i++) {const obj = {};obj[0] = keys[i];let totalCost = 0;for (let j = 0; j < values[i].length; j++) {obj[j + 1] = values[i][j];totalCost += parseInt(values[i][j]);}obj[values[i].length + 1] = totalCost;result.push(obj);}return result;},// 初始页currentPage、初始每页数据数pagesize和数据datahandleSizeChange: function (size) {this.pager.pageSize = size;this.onSubmit()},handleCurrentChange: function (currentPage) {this.pager.currentPage = currentPage;this.onSubmit()},openExecl() {// var postData = {//   itemName:this.ruleForm.itemName,//   staTime: dataFormatetmd(new Date(this.ruleForm.staTime)),//   endTime: dataFormatetmd(new Date(this.ruleForm.endTime)),// }// // download.exportExcel("http://localhost:8001/fmis/test/export-excel-file",{title:"title","rowNum":23},"逝者火化档案_"+download.getDateTime()+".xls");// download.exportExcel(Type['loadCommodityDataExport'], postData, "小商品日销售统计_" + download.getDateTime() + ".xlsx");if(this.multipleSelection.length==0&&this.tableData.length>0){let xlsxParam = { raw: true };let name ='每日火化量统计'let  wb={}if(this.tableData.length==0){return this.$message('暂无数据可导出')}wb= XLSX.utils.table_to_book(document.querySelector("#res_table"),xlsxParam);/* 从表生成工作簿对象 *//* 获取二进制字符串作为输出 */var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(//Blob 对象表示一个不可变、原始数据的类文件对象。//Blob 表示的不一定是JavaScript原生格式的数据。//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。new Blob([wbout], { type: "application/octet-stream" }),//设置导出文件名称`${name}${(new Date()).valueOf()}.xlsx`);} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;}else {}},//打开逝者档案},}
</script>
<style>.dailyCremationVolume .PageContent .PageItems .el-input, .dailyCremationVolume .PageContent .PageItems .el-select {width: 8vw;min-width: 100px;}/* .dailyCremationVolume .el-dialog__header {background-color: cornflowerblue !important;} */.dailyCremationVolume .el-dialog__title, .dailyCremationVolume .el-dialog__headerbtn .el-dialog__close {color: white;}.dailyCremationVolume .el-dialog {min-width: 300px !important;}.dailyCremationVolume .PageItems .el-input, .dailyCremationVolume .PageItems .el-select {width: 8vw;min-width: 100px;}.dailyCremationVolume .detail .el-form-item {margin-bottom: 5px;}
</style>
<style scoped>
/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
::v-deep .el-table thead.is-group th {background: none;padding: 0px;
}::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {border-bottom: none; /*中间的横线去掉*/
}::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {text-align: right; /*上边文字靠右*/
}::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {text-align: left; /*下边文字靠左*/
}
/*核心代码*/
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {content: "";position: absolute;width: 1px;height: 100px; /*斜线的长度*/top: 0;left: 0;background-color: grey;opacity: 0.2;display: block;/* transform: rotate(-43deg); *//* transform: rotate(-70deg); */transform: rotate(-50deg);-webkit-transform-origin: top;transform-origin: top;
}::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {content: "";position: absolute;width: 1px;height: 100px; /*斜线的长度*/bottom: 0;right: 0;background-color: grey;opacity: 0.2;display: block;/* transform: rotate(-45deg); */transform: rotate(-50deg);-webkit-transform-origin: bottom;transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {height: 27.4px;
}
</style>