最近項目經常用到帶有合並效果以及動態列的表格，而翻閱iview和element-ui官網沒有找到合適的(也有可能自己的水平有限，不會改寫),所以只好自己用原生表格寫了一個，具體效果如下:
這個表格右側表頭的會員等級列是根據篩選結果動態生成，左側的初始狀態是按着結果動態合並行，右上也對應的有一個下載表格數據的方法，實現着這表格的關鍵在於對原生表格"th","tr"標簽以及對"rowspan"，“colspan”兩個屬性的理解,關於表格部分的html代碼如下:
通常我們在寫這種表格的時候經常會遇到以下問題:
問題一:
我該怎樣確定該合並多少行或列？
首先，我們需要對后台返回的數據進行處理，如果不是數組我們就需要先將數據處理成數組，因為"rowspan"，“colspan”只接受number類型的值,處理成數組之后就具有了“length”屬性,然后在通過v-bind進行綁定，比如我這里的“:rowspan="this.levellist.length+1",至於為什么加1,因為是從0開始，不加的話合並的行數會少一行；
問題二:
我該怎樣實現動態列?
同理，我們如果拿到的數據是對象就需要通過v-if對數據的有無進行判斷，然后通過打點的方式進行數據綁定渲染，如果直接是數組，就通過v-for直接對數據進行遍歷;
問題三：
關於表頭的合並及動態列？
可以看到，我這里的“會員人數”是有兩行合並在一起，而"截止狀態"和“會員等級”各占一行,"會員人數“代碼部分我是先讓他們占據兩個“tr”，然后將"會員人數"合並成一行，然后"截止狀態","會員等級"各占一行，通過v-for循環出"會員等級"從而實現表頭動態列；
問題四:
怎樣實現表格數據下載?
這里是借鑒了網友的方法，代碼如下，總之就是先給定一個類名，然后安裝"file-saver"這個依賴項並導入來實現,代碼如下:
這里是導入相關依賴項,通過 npm install file-saver -save 或yarn add file-saver --save安裝，然后在通過import導入,
導出方法如下圖:
將這個方法綁定到"下載"按鈕即可！共勉！！