關(guān)于vant折疊面板默認(rèn)展開問題
vant折疊面板默認(rèn)展開
最近做項(xiàng)目有個(gè)需求
讓所有的vant組件庫中的折疊面板van-collapse-item全部打開，collapse折疊面板是嵌入在van-tab中的。
之前通過查資料，發(fā)現(xiàn)只要這兩個(gè)值一樣就能將面板默認(rèn)置為打開。
注意：van-collapse中綁定的activeName不是一個(gè)數(shù)組就會(huì)報(bào)錯(cuò)
這里因?yàn)樯厦娼壎ǘ际莿?dòng)態(tài)的，所以我們不能給activeName寫死某個(gè)值，那么循環(huán)把所有title放到activeName數(shù)組里。
通過給activeName的賦值處理，就能讓activeName的值和guideTitle的每一項(xiàng)title值都有了，并且綁定的值保持了一致。這樣的話就可以默認(rèn)折疊面板都打開了。
以上是動(dòng)態(tài)的name綁定的寫法。
那么還有一種方法是寫死的name值，也可以默認(rèn)全部打開：
此時(shí)這里的name前面沒有冒號(hào)，說明綁定的是一個(gè)固定的字符串‘index’，那么只要title中綁定的名字和name的字符串一致，就是默認(rèn)展開此面板，又由于這是一個(gè)for循環(huán)的面板，故所有的面板的名字是一致的，也就是默認(rèn)全部展開（注：這里仍然用的是數(shù)組格式）
我查資料的時(shí)候還發(fā)現(xiàn)可以只把折疊面板的某一項(xiàng)打開
這里的title名字是自己定義的。綁定的值為name的值。由于這是一個(gè)循環(huán)嵌套的面板，故而綁定時(shí)需要用一個(gè)數(shù)組格式來接收。
注意：name前面有冒號(hào)，說明后面是一個(gè)變量或者表達(dá)式，沒加冒號(hào)就是固定的字符串
給title聲明變量，并默認(rèn)第一個(gè)面板展開
這里的原理跟上面一致，都是綁定的title和動(dòng)態(tài)name值一致即可。
vant點(diǎn)擊圖標(biāo)展開收縮
效果圖如上，下面是用table來布局的，table返回字段有isShow顯示該行，否則沒有隱藏行，點(diǎn)擊icon圖標(biāo)對(duì)table進(jìn)行展開隱藏操作。
附加：table-row解決tr的display為block時(shí)串行 。。。
數(shù)據(jù)格式：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vuecli4插件svg-sprite-loader使用svg圖標(biāo)
這篇文章主要為大家介紹了vuecli4插件svg-sprite-loader使用svg圖標(biāo)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue?2?如何添加?register-service-worker?實(shí)現(xiàn)緩存請(qǐng)求的問題
這篇文章主要介紹了Vue?2?如何添加?register-service-worker?以實(shí)現(xiàn)緩存請(qǐng)求的目的,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了在VUE3中如何禁止網(wǎng)頁返回到上一頁,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了vue的可拖拽的瀑布流布局組件有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue使用ECharts實(shí)現(xiàn)折線圖和餅圖
這篇文章主要為大家詳細(xì)介紹了vue使用ECharts實(shí)現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
有時(shí)候我們使用el-table的選擇框時(shí),如果涉及修改、刪除時(shí),可能一次只允許用戶選擇一條,這樣的話如果使用頂部的全選復(fù)選框就不合適了,這篇文章主要給大家介紹了關(guān)于el-table表頭全選框隱藏或禁用設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-09-09
Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問題解決
這篇文章主要為大家詳細(xì)介紹一下Vue使用xlsx-style導(dǎo)出excel時(shí)樣式的設(shè)置,以及出現(xiàn)添加背景色,合并單元格部分樣式缺失問題的解決,需要的可以參考下2024-01-01
Vue中filter使用及根據(jù)id刪除數(shù)組元素方式
這篇文章主要介紹了Vue中filter使用及根據(jù)id刪除數(shù)組元素方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)舉例詳解
最近工作遇到個(gè)需求,表單可以進(jìn)行增加刪除操作,需要進(jìn)行表單校驗(yàn),這篇文章主要給大家介紹了關(guān)于elementUI動(dòng)態(tài)嵌套el-form表單校驗(yàn)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue3+vite相對(duì)路徑的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06