Vue封装一个导出Excel的组件或公共函数
封装为公共函数的方法
点生成报表时，将数据从后台返回，并赋值给element的table，这里即id='table' 的表。
1、在项目的src\utils文件夹下，新建toExcel.js文件，代码：
/* 导出Excel,封装为一个公共函数。这里是和element的table配合，导出table中的数据
* 传入的参数为fileName，是要导出的数据的表格名称，即table的表名，一般用id='table' */
import XLSX, { WorkSheet } from "xlsx"
import FileSaver from "file-saver"
let toExcel = fileName =>{
if (fileName.length==0) {
return 0
}
let table = document.getElementById(fileName)
let worksheet = XLSX.utils.table_to_sheet(table)
let workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet')
XLSX.writeFile(workbook, 'excelFile.xlsx')
}
export {toExcel}
2、在vue组件中使用时，先引入
import {toExcel} from '../../utils/toExcel.js'
3、在按钮中调用该导出Excel的方法
<el-table id='table' :data='tableData'></el-table>
<el-button icon='el-icon-s-grid' @click="toExcel('table')">导出Excel</el-button>
注意，必须传递参数'table'。
4、相应按钮的点击
methods: {
toExcel(filename){
toExcel(filename)
}
}
注意：外层的toExcel是相应按钮的点击事件，即相应@click="toExcel('table')"，内层的toExcel是调用封装在utils中的toExcel公共函数，实现导出功能。
缺点：封装为函数，尽管也可以复用代码，但每次，仍需要写toExcel的方法，在按钮内，还需要写@click等，仍不是最高效的，应该封装为组件。
对element组件进行二次封装
1、在src的components目录下，新建ToExcel文件夹，然后里面新建两个文件：ToExcel.vue和index.js，ToExcel.vue代码如下
<template>
<div>
<el-button :type='type' :size='size' :disabled="disabled"
:style="{fontSize:fontSize}" icon='el-icon-s-grid'
@click="toExcel">导出Excel
<slot></slot>
</el-button>
</div>
</template>
<script>
import XLSX, { WorkSheet } from "xlsx"
import FileSaver from "file-saver"
export default{
name:'ToExcel', //封装好后使用时的组件名
props:{
type: { // type来定义button的类型
type: String,
default: 'success',
},
size:{ // size来定义button的大小
type:String,
default:'small'
},
fontSize:{ //字体大小，默认为16px
type:String,
default:'16px'
},
disabled: { //按钮是否可用
type: Boolean,
default: false,
},
table:String, //生成的element表格，即table的id
//circle: Boolean, // 是否为圆角按钮
},
methods:{
toExcel(){
//使用this.table来引用父组件传递过来的表格文件名，即props中的table
let table = document.getElementById(this.table)
if (table !== null){
let worksheet = XLSX.utils.table_to_sheet(table)
let workbook = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet')
XLSX.writeFile(workbook, 'excelFile.xlsx')
}
}
}
}
</script>
说明：
①:type='type' :size='size' :disabled="disabled" 因为是对element中el-button的二次封装，所以type,size和disabled都是el-button的属性，参见element文档。
type指定按钮的类型，默认为success，size指定按钮大小，默认为small，disabled设定按钮是否可用，默认为false，即可用。
这里的type，size，disabled来自父组件传递的值，然后在这用props接收，接收后，在下面的方法中可以用this.type来引用。
注意：props中的table，没有在el-button中绑定，但可以在方法中调用，比如this.table，即可获取从父组件传过来的值。
②:style="{fontSize:fontSize}" ，style是button的原生属性，不是element中el-button的属性，设定字体大小默认为16px。
③toExcel，给按钮绑定点击事件，当点击时执行toExcel方法，导出Excel。
2、index.js代码，引入ToExcel组件，并注册
import ToExcel from './ToExcel'
//注册ToExcel.vue
export default{
install:(Vue)=>{
Vue.component('ToExcel',ToExcel)
}
}
3、在main.js中引入ToExcel
import toExcle from'./components/ToExcel'
Vue.use(toExcle) //全局使用导出Excel的封装
4、使用封装好的组件
<el-table :id='tableid' :data='tableData'></el-table>,
<ToExcel :table='tableid'></ToExcel>
//以上为html部分，以下为js部分
export default{
data() {
return {
tableid:'table111', //给el-table绑定一个id，以便ToExcel组件使用
}
},
methods:{}
}
说明：
①这里封装的ToExcel，因为是使用document.getElementById来获取dom，所以必须要给表格指定一个id。
②在ToExcel使用时，因为需要绑定一个变量，所以要把tableid放进data中，
步骤4也可以简化，不用:table='tableid'和:id='tableid'，代码如下。这样，就不用在data中定义tableid了。
<el-table id='table111' :data='tableData'></el-table>,
<ToExcel table='table111'></ToExcel>
经过这样封装后，再使用导出Excel的按钮，只需上面的步骤3和步骤4就可以了。
5、如果不在Vue中全局使用，只在需要使用的父组件中调用，则先import 引入子组件，然后components注册子组件，最后 即可<子组件名></子组件名>调用子组件。
知识点延伸
父子组件之间是通过 props 和 自定义事件 来传参，非父子组件通常会采用 Vuex 传参
但是 Vuex 的设计初衷是用来管理组件状态，虽然可以用来传参，但并不推荐
因为 Vuex 类似于一个全局变量，会一直占用内存
在写入数据庞大的 state 的时候，就会产生内存泄露
当页面刷新的时候，Vuex 会初始化，同时也会丢失编辑过的数据
如果刷新页面时需要保留数据，可以通过 url 或者 sessionstorage 保存 id，然后 ajax 请求数据
在编写组件的时候，可以在 <style> 标签中添加 scoped，让标签中的样式只对当前组件生效
但是一味的使用 scoped，肯定会产生大量的重复代码
所以在开发的时候，应该避免在组件中写样式
当全局样式写好之后，再针对每个组件，通过 scoped 属性添加组件样式
