關(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ù)組就會報(bào)錯(cuò)
這里因?yàn)樯厦娼壎ǘ际莿討B(tài)的，所以我們不能給activeName寫死某個(gè)值，那么循環(huán)把所有title放到activeName數(shù)組里。
通過給activeName的賦值處理，就能讓activeName的值和guideTitle的每一項(xiàng)title值都有了，并且綁定的值保持了一致。這樣的話就可以默認(rèn)折疊面板都打開了。
以上是動態(tài)的name綁定的寫法。
那么還有一種方法是寫死的name值，也可以默認(rèn)全部打開：
此時(shí)這里的name前面沒有冒號，說明綁定的是一個(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前面有冒號，說明后面是一個(gè)變量或者表達(dá)式，沒加冒號就是固定的字符串
給title聲明變量，并默認(rèn)第一個(gè)面板展開
這里的原理跟上面一致，都是綁定的title和動態(tài)name值一致即可。
vant點(diǎn)擊圖標(biāo)展開收縮
效果圖如上，下面是用table來布局的，table返回字段有isShow顯示該行，否則沒有隱藏行，點(diǎn)擊icon圖標(biāo)對table進(jìn)行展開隱藏操作。
附加：table-row解決tr的display為block時(shí)串行 。。。
數(shù)據(jù)格式：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目中使用百度地圖api的詳細(xì)步驟
在之前的一個(gè)小項(xiàng)目中,用到的顯示當(dāng)?shù)氐牡貓D功能,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用百度地圖api的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue.js引用背景圖background無效的3種解決方案
這篇文章主要介紹了vue.js引用背景圖background無效的3種解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
uni-app無限級樹形組件簡單實(shí)現(xiàn)代碼
文章介紹了如何在uni-app中簡單封裝一個(gè)無限級樹形組件,該組件可以無線嵌套,展開和收縮,并獲取子節(jié)點(diǎn)數(shù)據(jù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
Vue源碼學(xué)習(xí)之關(guān)于對Array的數(shù)據(jù)偵聽實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼學(xué)習(xí)之關(guān)于對Array的數(shù)據(jù)偵聽實(shí)現(xiàn)，Vue使用了一個(gè)方式來實(shí)現(xiàn)Array類型的監(jiān)測就是攔截器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue+element自定義查詢組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue中element 的upload組件發(fā)送請求給后端操作
這篇文章主要介紹了vue中element 的upload組件發(fā)送請求給后端操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue3使用el-table實(shí)現(xiàn)新舊數(shù)據(jù)對比的代碼詳解
這篇文章主要為大家詳細(xì)介紹了在vue3中使用el-table實(shí)現(xiàn)新舊數(shù)據(jù)對比,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的小伙伴可以參考一下2023-12-12
m3u8是一種基于HTTP Live Streaming（HLS）文件視頻格式,它主要是存放整個(gè)視頻的基本信息和分片(Segment)組成,下面這篇文章主要給大家介紹了關(guān)于vue3使用videojs播放m3u8格式視頻的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)經(jīng)典選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于vue中組件傳參的幾種常用方法,Vue組件傳參方也是面試最常考的內(nèi)容,文中通過代碼實(shí)例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08