vue-cli2+element-ui表格数据选中与全选导出

1、页面结构：使用element-ui   table表格 选择使用 Checkbox模板。

2、安装插件

npm install  xlsx file-saver  -S 

3、使用的组件或js引入

import FileSaver from 'file-saver';

import XLSX from 'xlsx';

4、新建js接受两个值( List ,name) ,直接复制查看

        list = 导出数据

        name = 导出数据表名称

     import FileSaver from 'file-saver';            import XLSX from 'xlsx';const exportExcel = {    exportExcel(List,name) {      console.log(keyList)      var wopts = {        bookType: 'xlsx',        bookSST: true,        type: 'binary'      };      var workBook = {        SheetNames: ['Sheet1'],        Sheets: {},        Props: {}      };     workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(List);          let excelName = name +'.xlsx'          FileSaver.saveAs(new Blob([exportExcel.changeData(XLSX.write(workBook, wopts))], {            type: 'application/octet-stream'          }), excelName)        },        changeData(s) {          if (typeof ArrayBuffer !== 'undefined') {            var buf = new ArrayBuffer(s.length);            var view = new Uint8Array(buf);            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;            return buf;          } else {            var buf = new Array(s.length);            for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;            return buf;          }        },      }      export default exportExcel

5、组件中使用

    需注意：XLSX对象接收一个数组 需要在组件中处理好数据传给js文件定义好的方法直接使用

    接受数组格式(key为表头)：

    引用js：import exportExcel from '../../utils/exportExcel.js'

    执行导出按钮(val为选中数据的row)

    exportExcel(val){ let keyLisst = [] for(let item in val){ keyLisst.push( { '商品名称':val[item].name, '价格与规格':val[item].guige, '线上库存':val[item].price, '剩余库存':val[item].price, '销量':val[item].xiaoliang, '状态':val[item].stuats } ) } exportExcel.exportExcel(keyLisst,this.$route.meta.title) }

6、导出数据表