前言

前端在開發(fā)過程中若是管理系統(tǒng)之類的業(yè)務(wù)系統(tǒng)，則大多都會涉及到表格的處理，其中最為常見的就是表格的導入導出。有很多辦法都可以實現(xiàn)，其中最簡單的還是使用插件xlsx。

創(chuàng)新互聯(lián)建站，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、成都響應(yīng)式網(wǎng)站建設(shè)、展示型成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。

實現(xiàn)目標

1、對表格數(shù)據(jù)進行增加、刪除。
2、表格數(shù)據(jù)的導出、導入。

具體邏輯

增加、刪除功能比較簡單，直接利用vue數(shù)據(jù)的響應(yīng)式即可完成。導入、導出相對麻煩一點，但利用插件xlsx也可方便的實現(xiàn)。
1、增加。先構(gòu)造一些表格數(shù)據(jù)。

同時添加el-table綁定表格數(shù)據(jù)。

然后在表格下面添加輸入框，v-model綁定輸入數(shù)據(jù)。

具體效果如下，輸入數(shù)據(jù)后，敲擊回車即可將數(shù)據(jù)添加到表格中(三個是之前有的數(shù)據(jù)，最后一個是添加的數(shù)據(jù))。

2、刪除。同添加一樣，也是利用vue的響應(yīng)式完成的。在dom中綁定事件傳入需要刪除的數(shù)據(jù)條目序號后，直接對表格列表數(shù)據(jù)進行splice(第一個參數(shù)是截取的開始下標，第二個參數(shù)是截取的長度)操作即可。

3、導出。最關(guān)鍵的就是對二維數(shù)組的處理，二維數(shù)組的第一個元素為表頭數(shù)組，后面的依次為表格數(shù)據(jù)的數(shù)組元素。XLSX導出的步驟為：將二維數(shù)組添加到工作表、創(chuàng)建工作薄、將工作表添加到工作簿、寫入文件。值得注意的·是XLSX.writeFile可直接寫入文件數(shù)據(jù)，同時下載文件，第二個參數(shù)即為下載的文件名，無需使用file-saver之類的文件保存導出插件。

4、導入。導入的數(shù)據(jù)格式必須是事先約定好的。導入是在文件讀取完成之后進行的，所以必須先創(chuàng)建文件讀取器new FileReader()，讀取完成后使用XLSX.read讀取返回的結(jié)果，然后使用XLSX.utils.sheet_to_json將結(jié)果轉(zhuǎn)換為json，最后直接將json處理成自己想要的格式即可。需要注意的是，我這里導入方法觸發(fā)的事件是使用的input的change，所以數(shù)據(jù)導入完成后必須將input的值置空，防止二次選取相同文件時方法不能觸發(fā)。

結(jié)語

在導入時，需要注意在new FileReader()的加載事件中不使用箭頭函數(shù)的話，this是不會生效的。