1.引入js-table2excel插件

import table2excel from 'js-table2excel'

2.导出的表头数据

data() {
 excelHeaderArr: [
        {
          title: '第一个字段',
          key: 'column_1',
          type: 'text'
        },
        {
          title: '第二个字段',
          key: 'column_2',
          type: 'text'
        },
        {
          title: '第三个字段',
          key: 'column_3',
          type: 'text'
        },
        {
          title: '图片字段',
          key: 'imgurl',
          type: 'image',
          width: 100,
          height: 100
        }
 ]
}

3.导出的方法


    async batchDown() {
      var that = this
      var finalData = []
      // 调用接口获取数据
      await getList().then(response => {
        // 这里处理特殊字段
        var filterList = response.filter(function(item) { 
        	// 例如处理null值
        	item.imgurl = item.imgurl ? item.imgurl : ''
        	// return false时代表移除对应的item
          return true
        })
        finalData = finalData.concat(filterList)
      })

	  // 执行导出
      table2excel(that.excelHeaderArr, finalData, 'excel列表.xlsx')
    },
GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐