数据Excel导出-支持复杂表头

我们在实际的业务场景中，需要在前端导出表格中的数据，这一需求还是比较常见的，在Avue的表格中就非常好实现了。

<!-- 导入需要的包 （一定要放到index.html中的head标签里）--><script src="https://cdn.staticfile.org/FileSaver.js/2014-11-29/FileSaver.min.js"></script><script src="https://avuejs.com/cdn/xlsx.full.min.js"></script>

注意：一定要加入这2个导出的核心包，同时配置excelBtn:true开启导出按钮

<avue-crud :option="option" :data="data"></avue-crud><script>export default {  data(){    return {       data:[{          text1:'内容1-1',          text2:'内容1-2'       },{          text1:'内容2-1',          text2:'内容2-2'       }],       option:{          title:'表格的标题',          excelBtn:true,          addBtn:false,          menu:false,          align:'center',          column: [{            label: '列内容1',            prop: 'text1',          }, {            label: '列内容2',            prop: 'text2',          }]       }    }  }}</script>

当然只能导出当前页面的数据的，而不是全部的数据，你要导出全部的数据，可以使用全局Api的$Export excel导出去实现

<div style="width:400px"> <el-button type="primary" @click="handleExcel">下载 excel</el-button> <el-button type="success" @click="handleExcel1">下载 复杂表头excel</el-button></div><script>export default {  data(){    return {}  },  methods: {     handleExcel() {      let opt = {        title: '文档标题',        column: [{          label: '标题',          prop: 'title'        }],        data: [{          title: "测试数据1"        }, {          title: "测试数据2"        }]      }      this.$Export.excel({        title: opt.title ,        columns: opt.column,        data: opt.data      });    },    handleExcel1() {      let opt = {        title: '文档标题',        column: [{          label:'复杂表头',          prop:'header',          children:[            {              label: '标题1',              prop: 'title1'            },{              label: '标题2',              prop: 'title2'            }          ]        }],        data: [{          title1: "测试数据1",          title2: "测试数据2"        }, {          title1: "测试数据2",          title2: "测试数据2"        }]      }      this.$Export.excel({        title: opt.title,        columns: opt.column,        data: opt.data      });    }  }}</script>