vue

vant Collapse 折叠面板默认全部展开

2020-08-04  本文已影响0人  web30
需求:进入页面时,要求折叠面板下的内容全部展开
效果图
代码
<div>
   <!--<<van-collapse v-model="activeName"  accordion>>-->//千万注意:accordion要删除掉
   <van-collapse v-model="activeName" > 
      // name="index" 这里同data里定义的数组里保持一致
      <van-collapse-item name="index" title="体检项目及检查结果" icon="shop-o">
         <div v-for="(item, index) in items" :key="index" :value="item.title">
            <template>
              <div class="resultChild" @click="eachResult">{{item.title}}<span class="result_child"><van-icon name="arrow" /></span></div>
              <van-divider />
            </template>
          </div>
        </van-collapse-item>
   </van-collapse>
</div>
data(){
  return{
    activeName: ['index'], // 保持一致
    // 本地模拟数据
    items: [
        { title: "身高体重" },
        { title: "血压" },
        { title: "内科" },
        { title: "外科" },
        { title: "眼科常规检查" }
      ],
    }
}

参考:https://blog.csdn.net/Carrie_Q/article/details/102901141

上一篇 下一篇

猜你喜欢

热点阅读