关于vant折叠面板默认展开问题
vant折叠面板默认展开
最近做项目有个需求
让所有的vant组件库中的折叠面板van-collapse-item全部打开，collapse折叠面板是嵌入在van-tab中的。
之前通过查资料，发现只要这两个值一样就能将面板默认置为打开。
注意：van-collapse中绑定的activeName不是一个数组就会报错
这里因为上面绑定都是动态的，所以我们不能给activeName写死某个值，那么循环把所有title放到activeName数组里。
通过给activeName的赋值处理，就能让activeName的值和guideTitle的每一项title值都有了，并且绑定的值保持了一致。这样的话就可以默认折叠面板都打开了。
以上是动态的name绑定的写法。
那么还有一种方法是写死的name值，也可以默认全部打开：
此时这里的name前面没有冒号，说明绑定的是一个固定的字符串‘index’，那么只要title中绑定的名字和name的字符串一致，就是默认展开此面板，又由于这是一个for循环的面板，故所有的面板的名字是一致的，也就是默认全部展开（注：这里仍然用的是数组格式）
我查资料的时候还发现可以只把折叠面板的某一项打开
这里的title名字是自己定义的。绑定的值为name的值。由于这是一个循环嵌套的面板，故而绑定时需要用一个数组格式来接收。
注意：name前面有冒号，说明后面是一个变量或者表达式，没加冒号就是固定的字符串
给title声明变量，并默认第一个面板展开
这里的原理跟上面一致，都是绑定的title和动态name值一致即可。
vant点击图标展开收缩
效果图如上，下面是用table来布局的，table返回字段有isShow显示该行，否则没有隐藏行，点击icon图标对table进行展开隐藏操作。
附加：table-row解决tr的display为block时串行 。。。
数据格式：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之取值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
v-for是vue的循环指令,作用是遍历数组(对象)的每一个值,这篇文章主要给大家介绍了关于Vue中v-for的9种使用案例的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
如何利用Vue3+Element Plus实现动态标签页及右键菜单
标签页一般配合菜单实现,当你点击一级菜单或者二级菜单时,可以增加对应的标签页,当你点击对应的标签页,可以触发对应的一级菜单或者二级菜单,下面这篇文章主要给大家介绍了关于如何利用Vue3+Element Plus实现动态标签页及右键菜单的相关资料,需要的朋友可以参考下2022-11-11
最近在学习vue，今天正好发现个问题，本文介绍了v-html渲染组件问题，整理了问题的解决方法，有需要的小伙伴可以参考下2021-05-05
vue使用keep-alive实现组件切换时保存原组件数据方法
这篇文章主要介绍了vue使用keep-alive实现组件切换时保存原组件数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本节介绍双向数据绑定以及响应式的原理，回答了双向数据绑定和数据响应式是否相同，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-08-08
这篇文章主要介绍了VUE动态生成word的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在Vue项目中实现打印功能是前端开发中常见需求之一,这篇文章主要介绍了前端vue3打印功能实现的全部过程,文中介绍的方法实现了多页打印并且不使用插件,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue中使用带隐藏文本信息的图片、图片水印的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了Vue组件上使用v-model之单选框,代码分为子组件内容和父组件内容，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
最新评论