封裝為公共函數的方法
點生成報表時，將數據從后台返回，並賦值給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 屬性添加組件樣式