Vue实现导出excel表格功能
引言：最近使用vue在做一个后台系统，技术栈 vue + iView ，在页面中生成表格后， iView可以实现表格的导出，不过只能导出csv格式的，并不适合项目需求。 如果想要导出Excel
表结构渲染页面中的表结构是由 columns 列 和 tableData 行，来渲染的 columns 为表头数据 tableData 为表实体内容 {
if (params.row.status !== '1' && params.row.status !== '2') {
return h('div',[
h('checkbox',{
props: {
type: 'selection'
},on: {
'input': (val) => {
console.log(val)
}
}
})
])
} else {
return h('span',{
style: {
color: '#587dde',cursor: 'pointer'
},on: {
click: () => {
// this.$router.push({name: '',query: { id: params.row.id }})
}
}
},'查看订单')
}
}
},...
],
tableData 就不写了，具体数据结构查看 在build 目录下 webpack.base.conf.js 配置 我们要加载时的路径 在当前页面中引入依赖 当我们要导出表格执行 @click 事件调用 handleDownload 函数 {
const {export_json_to_excel} = require('src/vendor/Export2Excel')
const tHeader = Util.cutValue(this.columns1,'title')
const filterVal = Util.cutValue(this.columns1,'key')
const list = this.tableData1
const data = this.formatJson(filterVal,list)
export_json_to_excel(tHeader,data,'列表excel')
this.downloadLoading = false
})
},formatJson(filterVal,jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
Util.cutValue 是公共方法，目的是为了将，tHeader 和filterVal 的值转成数组从而生成表格 下面再看下vue中excel表格的导入和导出注意：vue中要实现表格的导入与导出，首先要install两个依赖，
1、导入importfxx(obj) { 2.导出 {
const { export_json_to_excel } = require('../../vendor/Export2Excel'); //引入文件
const tHeader = ['用户名','姓名','部门','职位','邮箱','充值']; //将对应的属性名转换成中文
// const tHeader = [];
const filterVal = ['userName','realName','department','position','email','money'];//table表格中对应的属性名
const list = this.sels;
const data = this.formatJson(filterVal,list);
export_json_to_excel(tHeader,'列表excel');
})
}
总结以上所述是小编给大家介绍的Vue实现导出excel表格功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |