分分钟了解vue-element-admin导出

这是一个基于vue前端导出的一种方式、后端只需要提供查询的接口即可、对于常用简单的导出，即简单，又方便，还便捷。

1. 点击导出事件

    <el-button class="height32" size="small" type="primary" icon="el-icon-download" @click="handleDownload">
       导出
    </el-button>
   

2. 执行导出下载方法

handleDownload() {
    
    
  this.downloadLoading = true   // 加载中...
  import('@/vendor/Export2Excel').then(excel => {
    
       // 需要引入vendor/Export2Excel插件
  	// 列头
	const tHeader = ['班级编号', '班级名称', '开班日期', '结班日期', '班主任', '教室', '学生人数'] 		   
	//标识列头名称 方便转换：如性别
	const filterVal = ['classNo', 'className', 'startDate', 'endDate', 'kcLeader','coursePlace','stuNum']  
	expClassStuLst(this.listQuery).then(response => {
    
       // 调用js查询方法-无分页-根据条件查询方法								 			   
	  const list = response.data
	  const data = this.formatJson(filterVal, list)
	  excel.export_json_to_excel({
    
    
		header: tHeader,
		data,
		filename: '班级学员信息',
		autoWidth: true,
		bookType: 'xlsx'
	  })
	  this.downloadLoading = false
	})
  })
},
formatJson(filterVal, jsonData) {
    
    
  return jsonData.map(v => filterVal.map(j => {
    
    
	if (j === 'gender') {
    
    
	  return genderOptions[v[j]]   // 男女-集合
	} else {
    
    
	  return v[j]
	}
  }))
}

3. 效果图