VUE3在表格中嵌套子表格

子表格的分頁查詢互相干擾的問題解決

簡單嵌套

如果不需要做子表格的分頁查詢，那么可以直接在主表格中嵌套子表格，有兩種方式；一種是主表格加載的同時加載子表格數(shù)據(jù)，另一種是點擊展開時加載子表格數(shù)據(jù)，盡量使用第二種方式；代碼如圖1-1所示；

圖1-1

我們可以看到在el-table控件中增加了一列<el-table-column type="expand">，這里的expand表示為展開類型，然后再嵌套了一個子表格，這個子表格就是列展開后的數(shù)據(jù)，這樣我們就嵌套完成了，效果如圖1-2所示；

注：這里過于簡單，我直接引用官網(wǎng)上的示例，感興趣的可以前往查看：

https://element-plus.org/zh-CN/component/table.html

圖1-2

子表格分頁查詢

在做這個功能的過程中，我遇到了以下幾個問題：

1、展開時查詢沒問題，但是切換頁面與改變?nèi)萘繒r無法賦值；

2、查詢過程中子表格共用一個加載變量，導(dǎo)致我展開一個子表格時另外的已展開的子表格會同時“轉(zhuǎn)圈圈”；

3、子表格共用一套分頁參數(shù)，導(dǎo)致一個子表格切換頁面時，其他子表格也跟著切換；我們一個一個來解決這些問題；

切換頁面與改變?nèi)萘繒r，我們會觸發(fā)el-pagination控件的size-change事件以及current-change事件，查看官方文檔得知這兩個事件都只有一個number類型的參數(shù)，這里我們需要自己傳入?yún)?shù)，那就是主表的當(dāng)前行（props.row），我們把行數(shù)據(jù)傳過去之后，才能給行的子表格這一個屬性賦值，如圖2-1所示；

圖2-1

注：這里的props是圖2-2在代碼中定義了的；

圖2-2

這樣我們的數(shù)據(jù)在查詢出來之后可以直接把值賦給row.detail，如圖2-3所示；

圖2-3

這樣我們解決了無法給子表格直接賦值的問題，這里的解決方案主要是給el-pagination控件的size-change以及current-change事件手動傳入當(dāng)前主表的行數(shù)據(jù)（props.row）。

其實第2個問題與第3個問題如出一轍，都是因為多個控件共用了同一個參數(shù)導(dǎo)致的互相干擾，很明顯這樣是不行的；所以我們只要想辦法解決共用參數(shù)的問題就好了，我們可以發(fā)現(xiàn)，其實子表格數(shù)據(jù)本身就是一個例子，多個子表格，用“同一個變量”（props.row.detail）來賦值，那是不是我們的分頁參數(shù)也可以在主表格中占一個位置，當(dāng)作參數(shù)使用呢，這樣主表每一行里面的子表格中的loading以及分頁參數(shù)自然就互不干擾了；

圖2-4為主表格中添加的列，我們用v-if來隱藏；

圖2-4

然后在分頁查詢事件觸發(fā)的時候，與行參數(shù)一并傳入了子表格查詢方法（childQuery）中，第一次查詢使用默認參數(shù)，每次查詢最后都保存后端分頁參數(shù)的結(jié)果，第二次開始后直接使用上次保存的分頁參數(shù)查詢即可，這樣就可以解決【分頁參數(shù)】互相干擾的問題，同樣，isLoading參數(shù)也是每次使用當(dāng)前row的isLoading，這樣自然就不會互相干擾，代碼如圖2-5所示；

圖2-5

接下來我們看一下效果圖：

正常展開效果圖：

圖2-6

多子表展開效果圖：

圖2-7

圖2-8

換頁效果圖：

圖2-9

至此，問題解決，這是我自己探索出來的解決方案，肯定不是最好的解決方案，如果有更好的方法，歡迎一并探討，感謝閱讀！

到此這篇關(guān)于VUE3子表格嵌套分頁查詢互相干擾的問題解決的文章就介紹到這了,更多相關(guān)VUE3子表格嵌套分頁查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論