vue-iview导出excel

安装

npm install xlsx --save

npm installiview--save

main入口引入

import iView from 'iview';

import 'iview/dist/styles/iview.css';

Vue.use(iView);

使用

导出excel

  :columns="columns1" :data="data1">

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.$Message.info('表格数据不能为空！')

}

}