前言

最近項目中需要用到多層樹table+checkbox勾選功能，選了一些組件，最終決定使用vxe-table。

Vxe-table功能豐富、api也多。官方例子很多比較粗淺，我花了很多精力才弄通了一些功能點及細(xì)節(jié)。在此匯總給大伙鋪鋪路。官網(wǎng)：vxe-table v4，安裝配置和一般組件庫差不多，就不細(xì)說了。由于項目用的是vue2，所以vxe-table用的是v3版本。

1、樹形結(jié)構(gòu)配置：

官方配置的樹是一個數(shù)組，需要在tree-config對象里設(shè)置transform為true，這樣才會自動把數(shù)組轉(zhuǎn)換為需要的樹結(jié)構(gòu)。

如果已經(jīng)有一個具有樹形結(jié)構(gòu)的表數(shù)據(jù)，則應(yīng)該設(shè)置transform為false。如下圖所示：

2、獲取全局table對象：

this.$refs[vxe-table標(biāo)簽上的ref屬性值]

官方文檔中的table方法api都可以通過該對象調(diào)用，如

this.$refs['Tree' + this.activeName][0].setCheckboxRow(row,row.checkFlag)
this.$refs['Tree' + this.activeName][0].loadData(this.middleValue)
this.$refs['Tree' + this.activeName][0].remove(firstLoop)

3、使用多選框注意事項：

在checkbox-config的checkField可以綁定選中屬性字段，勾選狀態(tài)為true，未勾選和半選狀態(tài)為false。組件會自動渲染勾選和未勾選狀態(tài)，但不會自動渲染半選狀態(tài)，除非設(shè)置checkRowKeys，但這種方式只會在初始化時被觸發(fā)一次，動態(tài)刷新時沒有相應(yīng)api觸發(fā)。期間還試了很多方式都無法完美解決該問題，最后是采用slot模板插槽搞定的，我將在第七點詳細(xì)介紹。

4、編輯行或單元格注意事項：

設(shè)置edit-config的mode為cell時是開啟單元格編輯模式，為row時是開啟行編輯模式；設(shè)置edit-config的activeMethod來決定該單元格是否允許編輯（該方法的返回值為true或false），如下圖所示，它的意思是只要表格行有childes屬性且該屬性不為空就不能點擊；edit-closed只對 edit-config 配置時有效，單元格編輯狀態(tài)下被關(guān)閉時會觸發(fā)該事件，可以通過該事件實現(xiàn)實時保存編輯功能。

想要編輯的列插槽主要有三個屬性配置：1、field：列字段名，這里需要的是直接可以取到的字段；2、edit-render：可編輯渲染器配置項，具體用法可參考官網(wǎng)vxe-table v3：只對 edit-render 啟用時有效，自定義可編輯組件模板，可傳多個參數(shù)，如傳row的話，template里的標(biāo)簽可以獲取行數(shù)據(jù)。需要注意的是：field值和模板里的v-model值應(yīng)該為同一個，才能實現(xiàn)雙向綁定，建議提前把想要編輯的字段放到可以直接取到的層級和地方。

5、表尾數(shù)據(jù)合并問題：

配置show-footer為true可以開啟表尾，再通過footer-method方法獲取表尾的數(shù)據(jù)，該數(shù)據(jù)是一個二維數(shù)組。這里需要注意一個問題：表尾數(shù)據(jù)在觸發(fā)方法獲取后只能通過編輯單元格動態(tài)改變，通過該方法改變二維數(shù)組后是不會更新變化后的值。

6、僅顯示已勾選功能講解：

這個功能就是通過loadData方法加載去掉未勾選行列表數(shù)據(jù)和原始表數(shù)據(jù)之間切換。全局table對象下有兩個字段：data和tableData，前者是動態(tài)改變了數(shù)據(jù)的整個初始化表數(shù)據(jù)，可以用來還原僅顯示已勾選功能，后者是現(xiàn)在加載著的表數(shù)據(jù)，經(jīng)過處理后可以用來激活僅顯示已勾選功能。這里需要注意的是：vxe-table加載列表數(shù)據(jù)后會默認(rèn)自動生成自定義行數(shù)據(jù)唯一主鍵字段_X_ROW_KEY，我們可以在數(shù)據(jù)處理時用上該字段，如下圖所示：

7、解決初始數(shù)據(jù)半選中狀態(tài)失效問題：

我采用插槽方式自定義了checkbox，它的不確定狀態(tài)（半選）字段indeterminate我綁定了判斷是否半選方法：只要節(jié)點是未選中狀態(tài)且有選中狀態(tài)的兒子節(jié)點就是true半選狀態(tài)，否則為false未選中狀態(tài)。

由于將checkbox自定義了，vxe-table的checkbox-change失效，所以要重新在vxe-checkbox里面綁定change事件。最簡單的方式就是直接通過setCheckboxRow方法把勾選行設(shè)置勾選狀態(tài)，它的好處是會把勾選節(jié)點的所有子節(jié)點一并設(shè)置是否勾選狀態(tài)。

補(bǔ)充：VXEtable展示指定行所遇到得問題

設(shè)置指定行展開時，通過expandRowKeys可以進(jìn)行默認(rèn)展開，但是只有頁面初始化得時候才會觸發(fā)一次。如果我們需要通過點擊等事件來傳遞不同參數(shù)來改變所展開的行時，可以使用setRowExpand(rows, checked)。

rows指我們想要展開那一行的整條參數(shù) 也可以傳遞數(shù)組方式來展開多條。

checked為是否展開

試驗時我傳遞的參數(shù)為定義的死數(shù)據(jù)

const rowObj={
              id: "0044555555555555",
              tit: "展開該條"
            }
this.$refs["vxTable"].setRowExpand(rowObj, true)

這時候該方法不會觸發(fā)，沒有效果，但是當(dāng)我用想要展開的行得id去數(shù)據(jù)中進(jìn)行對比然后直接傳入，是可以成功展開。

const rowObj= this.tableData.filter(v => v.id === this.uid)
this.$refs["vxTable"].setRowExpand(rowObj, true)

這時可以通過我傳遞得不同id來展開我想要展開的那一行

this.$refs["vxTable"]用來獲取當(dāng)前的vxe-table

總結(jié)

到此這篇關(guān)于Vue表格組件Vxe-table使用技巧的文章就介紹到這了,更多相關(guān)Vxe-table使用技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論