外联式 vue+element ui 表格导出e'xcel

新加的一个需求就是不是vue脚手架的后台管理系统要导出excel表格，话不多说，先讲一下怎么导出，不是脚手架的vue肯定不能npm xlsx 这个插件了
所以我们需要引入<script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.core.min.js"></script>这个https的 xlsx的插件

     outExe() {var ws_name = "SheetJS";var wb = XLSX.utils.book_new();/* make worksheet */var ws_data = [["序号", "订单号", "订单时间", "会员账号", "账户", " 币种", "充值数量", "到账时间", "状态", 'USDT汇率', "CNY"],];this.tableData.forEach((el, index) => {el.orderStatuss = this.types[el.orderStatus]ws_data.push([++index, el.orderCode, el.createDates, el.mobile,el.account ,el.coinType, el.amount, el.payDates, el.orderStatuss, el.sellPrice, el.totalPrice])})// var ws_data = this.tableDatavar ws = XLSX.utils.aoa_to_sheet(ws_data);/* Add the worksheet to the workbook */XLSX.utils.book_append_sheet(wb, ws, ws_name);XLSX.writeFile(wb, 'out.xlsx');},

这个是导出的写法，其实很简单，ws_data这个变量就是定义的你表格头部的那一栏
下面写了一个forEach循环把后端给你的数组遍历进去，因为后端返回的字段里面有需要做处理的数据
所以我在data里面定义了一个types，并且把处理好的数据在push进了一个新数组

    types:{'1':'已到账','5':'已取消 ','6':'未支付'}

这样就可以实现打印效果了。展示页就用了vue的solt插槽

 <el-table-column prop="orderStatus" label="状态" ><template scope="scope"><p>{{types[scope.row.orderStatus]}}</p></template></el-table-column>

就是这样简单。。。。。

外联式 vue+element ui 表格导出e'xcel相关推荐

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
vue element ui表格下载成xlsx工作表格
我们需要两个依赖打开项目终端输入 npm i file-saver -S 和 npm i xlsx -S 在需要使用的组件中引入依赖 import FileSaver from 'file-sav ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...

外联式 vue+element ui 表格导出e'xcel

外联式 vue+element ui 表格导出e'xcel相关推荐

最新文章

热门文章