vue使用element ui---Table 表格导出Excel功能

1.html页面

<el-button type="addBtn sendBatchBtn" @click="sendBatchFun" @selection-change="handleSelectionChange">发放</el-button>

2.dom

data () {
	return {
		multipleSelection: [],
		select_order_number: '',
		currentTime: '', // 获取当前时间
	}
}

2.1获取当前时间

//获取当前时间
 getTimeCurrent () {
   var now=new Date();
   var year=now.getFullYear();
   var month=now.getMonth()+1;//月份少1
   if(month<10){
     month="0"+month;
   }
   var date=now.getDate();
   if(date<10){
     date="0"+date;
   }
   // var week = "星期" + "日一二三四五六".split(/(?!\b)/)[now.getDay()];
   var hours=now.getHours();
   if(hours<10){
     hours="0"+hours;
   }
   var minutes=now.getMinutes();
   if(minutes<10){
     minutes="0"+minutes;
   }
   var seconds=now.getSeconds();
   if(seconds<10){
     seconds="0"+seconds;
   }
   this.currentTime = year+"-"+month+"-"+date+"  "+hours+":"+minutes+":"+seconds;
 },

2.2导出dom

excleTableFun () {
  require.ensure([], () => {
    const {
      export_json_to_excel
    } = require('@/vendor/Export2Excel'); //Export2Excel的地址，与配置路径相对应
    const tHeader = ['序号', '激活码', '生成时间']; //表头
    const filterVal = ['id', 'code', 'create_time']; //userList里面的对应的全部数据
    const list = this.multipleSelection; //将导出数据赋值   -----单选或者全选选中的，参考我上一篇的全选单选功能
    const data = this.formatJson(filterVal, list); //参数过滤方法
    export_json_to_excel(tHeader, data, '发放激活码列表' + this.currentTime); //表名，方法封装在在Export2Excel中
  })
},

formatJson(filterVal, jsonData) {
	return jsonData.map(v => filterVal.map(j => v[j]))
},

2.3全选、单选

//全选，单选
 handleSelectionChange(rows) {
   this.multipleSelection = rows;
   this.select_order_number = this.multipleSelection.length;

   this.selectArr = [];
   if (rows) {
     rows.forEach(row => {
       if (row) {
         this.selectArr.push(row.id);
       }
     });
   }
 },

3.说明

this.multipleSelection; 为单选或者全选选中的行数据，参考我上一篇的全选单选功能

4.效果图