前言

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

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

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

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

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

2、獲取全局table對(duì)象：

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

官方文檔中的table方法api都可以通過(guò)該對(duì)象調(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、使用多選框注意事項(xiàng)：

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

4、編輯行或單元格注意事項(xiàng)：

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

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

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

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

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

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

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

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

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

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

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

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

checked為是否展開(kāi)

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

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

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

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

這時(shí)可以通過(guò)我傳遞得不同id來(lái)展開(kāi)我想要展開(kāi)的那一行

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

總結(jié)

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

最新評(píng)論