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