快捷導(dǎo)航

VUE3子表格嵌套分頁(yè)查詢互相干擾的問(wèn)題解決方案

更新時(shí)間：2024年01月30日 08:55:23 作者：zifeiyu666

這篇文章主要介紹了VUE3子表格嵌套分頁(yè)查詢互相干擾的問(wèn)題解決方案,如果不需要做子表格的分頁(yè)查詢，那么可以直接在主表格中嵌套子表格，本文給大家介紹兩種方式，需要的朋友可以參考下

VUE3在表格中嵌套子表格

子表格的分頁(yè)查詢互相干擾的問(wèn)題解決

簡(jiǎn)單嵌套

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

圖1-1

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

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

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

圖1-2

子表格分頁(yè)查詢

在做這個(gè)功能的過(guò)程中，我遇到了以下幾個(gè)問(wèn)題：

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

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

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

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

圖2-1

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

圖2-2

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

圖2-3

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

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

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

圖2-4

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