vue表格导出exce
安装
npm install xlsx --save
npm installiview--save
main入口引入
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
使用
<button @click="exportExcel">导出excel
:columns="columns1" :data="data1"></Table>
JS引入封装excel
import excelfrom '../../config/excel'
data(){
return{
columns1: [
{
title:'Name',
key:'name'
},
{
title:'Age',
key:'age'
},
{
title:'Address',
key:'address'
},
],
data1: [
{
name:'John Brown',
age:18,
address:'New York No. 1 Lake Park',
date:'2016-10-03'
},
{
name:'Jim Green',
age:24,
address:'London No. 1 Lake Park',
date:'2016-10-01'
},
{
name:'Joe Black',
age:30,
address:'Sydney No. 1 Lake Park',
date:'2016-10-02'
},
{
name:'Jon Snow',
age:26,
address:'Ottawa No. 2 Lake Park',
date:'2016-10-04'
},
],
methods: {
exportExcel() {
if (this.data1.length) {
const cloneData =this.data1;
const params = {
title: ['Name', 'Age', 'Address', ],
key: ['name', 'age', 'address', ],
data: cloneData,
autoWidth:true,
filename:'工单列表'
}
excel.export_array_to_excel(params)
}else {
this.$('表格数据不能为空！')
}
}
vue2中导出带有图片的excel表格1、安装插件
2、新建一个excel.js文件，写出你需要导出的数据
3、在需要导出的vue文件中引入
4、导出
