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