美文网首页前端之美-VueJs
vue2.0 + element UI 中 el-table 数

vue2.0 + element UI 中 el-table 数

作者: Timmy小石匠 | 来源:发表于2018-04-18 20:47 被阅读4122次

最近后台项目中有需要将游戏用户提交的返利数据信息导出为excel表的形式,所以对此功能进行了简单的总结:
1、 安装相关依赖

主要是两个依赖:(xlsx 和 file-saver)
npm install --save xlsx file-saver

对于这两个插件使用,github上边有更加详细的参考

https://github.com/SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)
https://github.com/eligrey/FileSaver.js](https://github.com/eligrey/FileSaver.js

2.在组件头里边引入插件(测试的时候,下边代码放到入口js文件main.js的时候没有效果,遗留问题,有待解决)(放到组件头里边能够实现效果)

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3.在对应组件里边methods里边写一个方法(到处的时候进行调用)

exportExcel () {
                /* generate workbook object from table */
                let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'));
                /* get binary string as output */
                let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '用户提交返利表.xlsx');
                } catch (e)
                {
                    if (typeof console !== 'undefined')
                        console.log(e, wbout)
                }
                return wbout
 },

提示:
上边方法中:XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ,sheetjs.xlsx 即为导出表格的名字,可修改!

  1. 点击导出按钮执行 exportExcel 的方法即可 。
<div class="export">
     <el-button @click="exportExcel" style="margin-top: 2px;" size="medium" type="success">导出</el-button>
</div>

相关文章

  • vue2.0 + element UI 中 el-table 数

    最近后台项目中有需要将游戏用户提交的返利数据信息导出为excel表的形式,所以对此功能进行了简单的总结:1、 安装...

  • vue

    element ui库 el-table报错,row of property of undefined.本地可以,...

  • 固定列和表格头的表格实现

    前言 脱离element-ui又借鉴element-ui,实现类似el-table的固定列和表头的效果 1-1固定...

  • vue全家桶

    vue-cli + vue2.0 + vuex + vue-route + axios + element-ui ...

  • electron中vue,table渲染大量数据卡顿

    在这个electron项目里,使用element-ui中的el-table渲染了很多数据(大于100条,每条中输入...

  • vue 中$set()的使用

    在使用 element-UI 中el-table时,更新TABLEDATA 中 ROW的某一个属性时,没有更新视图...

  • element-ui的使用

    element-ui的使用 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快...

  • element-ui的表格二次封装

    在使用element-ui的时候,虽然说element官方的el-table组件已经相当好了,但针对的是所以群体,...

  • el-table无限滚动加载更多-翻页

    element-ui 的表格与无限滚动的结合(el-table + infinite-scroll) 安装(建议安...

  • file 上传

    ​由于最近使用vue+Element ui vue2.0中upload组件存在很多上传地址不可跨域,或者上传获取后...

网友评论

  • 3f84bfae158d:导出列excel太长,科学计数怎么处理
  • 路易Louie:我这导出怎么直接数据复制了3遍。。
    柚子茶是咸的:@勿忘初心_03e1 是否使用了el-table fixed属性,是fixed left 还是right?
    勿忘初心_03e1:@柚子茶是咸的 用了 http://inmwang.com/#/detail/5 里面的方法,页面报错了
    Error in event handler for "click": "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
    柚子茶是咸的:我也复制了两遍 ,参考 http://inmwang.com/#/detail/5 解决了
  • b84137577dab:Vue.prototype.exportTable = function(data) {
    var wb = XLSX.utils.table_to_book(document.querySelector('#'+data.id));
    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
    try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), data.name+'.xlsx')
    } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
    return wbout
    };
    在main.js里面,这样可以写到全局方法里面,但是我导出的excel为什么有2份数据?你那导出只有一份数据么?
  • d46ae35458c4:这个是需要构建的对不对??
  • 大山的那边:导出表盒,可不可以限制导出我想要的列
  • b030319dabcf:谢谢分享,今天正好用上,很好用。
    坏蛋走开:我导出的是2分数据,什么原因,有哪位人士可以相告?
    b84137577dab:你导出后的excel不会出现2份数据么?为什么一模一样的代码 我这边导出后有2份数据?球解答下~
    yonglei_shang:elementui 你怎么给 table加的id

本文标题:vue2.0 + element UI 中 el-table 数

本文链接:https://www.haomeiwen.com/subject/gzpbkftx.html