位置: IT常识 - 正文

Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项

编辑:rootadmin
Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项 问题重现

推荐整理分享Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

        最近在做项目时,有一个需求是让 van-collapse 下拉折叠面板的第一项默认是展开状态;我使用到了 Vant UI 组件,首先按照官网文档的写法直接引入:

<!--下拉折叠面板--> <van-collapse class="collapse" v-model="activeNames" is-link="false"> <van-collapse-item title="" :name="index"> <!--展开后显示的内容--> <span class="coll_show">制定拜访计划</span> <span class="coll_show">保险保障分析</span> <span class="coll_show">制作计划书</span> <span class="coll_show">会客厅讲解</span> <span class="coll_show"> <van-cell @click="showEdit">修改备注</van-cell> <van-popup v-model="showRemark"> <p>修改备注</p> <form action="/"> <input class="text" placeholder="最多输入50个字" type="text"> <input class="btn1" type="button" value="取消"> <input class="btn2" type="submit" value="提交"> </form> </van-popup> </span> </van-collapse-item> </van-collapse>export default { data() { return { activeNames: ['1'], }; },};

默认每一项都是不展开的: 

需求实现

先看官方文档 Collapse Props:

参数说明类型默认值v-model当前展开面板的 name手风琴模式:number | string 非手风琴模式:(number | string)[ ]-accordion是否开启手风琴模式booleanfalseborder是否显示外边框booleantrueVant UI 中 van-collapse 下拉折叠面板如何默认展开第一项

        通过官方文档我们可以知道,van-collapse 的 v-model 属性所绑定的是当前展开面板 van-collapse-item 的 name 值,我的下拉面板父级为遍历产生,所以 name 值采用了动态的下标的依次为数字 0、1、2、3.....

而是否开启手风琴模式则决定了 v-model 属性值的类型。

非手风琴模式下:v-model 为数组类型,那么此时我们想让第一项也就是 name 值为 0 的折叠项默认展开,在 data 中传入 activeNames 时就应该将其设置数组格式且 默认值为 0,但注意是 [0] 而不是 ["0"]:

export default { data() { return { activeNames: [0], }; },};

此时第一项默认展开:

手风琴模式下:v-model 属性值类型为数字或字符串,那么我们将 data 中的 activeNames 改为数字或字符串即可;

export default { data() { return { activeNames: 0, }; },};

效果可以实现;

本文链接地址:https://www.jiuchutong.com/zhishi/287193.html 转载请保留说明!

上一篇:水培吊兰的养殖方法(水培吊兰的养殖周期)

下一篇:Monaco Editor教程(二二):monaco编辑器完整配置翻译及重点配置解析(monaco编辑器的自定义提示)

  • 原材料报废可以退税吗
  • 如何确定合伙企业
  • 企业当期的所得税费用
  • 房地产项目公司是什么意思
  • 买二手房没满2年多少税
  • 单位表彰性奖金是什么
  • 存货取得长期股权投资
  • 施工企业直接费间接费怎么算
  • 社保可以在税前扣除吗
  • 小规模季度超过30万是全额纳税吗
  • 财税[2001]10号
  • 淘宝的电子发票怎么看
  • 损益表和利润表的关系
  • 没有道路许可证可上营运吗
  • 增值税专用发票电子版
  • 筹建期间的开办费计入什么费用
  • 物业营改增什么时候开始
  • 零售价法会计分录
  • 对公账户转钱出来
  • 福利费不需要发票记账吗
  • 如何恢复微信语言聊天
  • 股金属于金融产品吗
  • 债券利息收入的分录
  • 小规模纳税人减免增值税的优惠政策
  • 何为民办非企业
  • php array_splice
  • win11 pin失效
  • 商会账目
  • windows 平台
  • wordpress主题0skr
  • php获取文件名后缀
  • 预提费用的核算有哪些
  • php socket_create
  • c#开发入门及项目实战
  • alex研究原文
  • vue.js前端
  • c#怎么使用
  • php中array怎么用
  • apache php mysql开发环境安装教程
  • 销售费用和管理费用占比多少合理
  • 单一窗口报关是指什么
  • 支付债券发行费怎么算
  • 个人收到承兑汇票
  • 个人所得税手续费奖励办税人员文件
  • 技术服务费可以计入成本吗
  • 公司注销前的资产负债
  • 个体户怎么开对公账户
  • 做账财务费用负数
  • 常见的递延所得税
  • 场地租赁费属于什么税收分类编码
  • 现金日记账本月合计怎么划线
  • 使用 GUID 值来作为数据库行标识讲解
  • mysql误操作数据恢复
  • insert into tbl() select * from tb2中加入多个条件
  • Centos MySQL 5.7安装、升级教程
  • 注册表已被管理员禁用怎么处理
  • 修改注册表解决画面撕裂
  • 怎么给电脑装win8系统
  • gacrunner.exe是什么
  • centos无法挂载位置
  • launcher.exe是什么程序
  • windows7开机后显示配置失败
  • win7正版提示
  • extjs DataReader、JsonReader、XmlReader的构造方法
  • Android游戏开发案例教程小小弹球
  • 批处理命令大全及用法
  • 批处理中如何判断当前文件中是否存在一个子目录
  • ubuntu重新安装网卡驱动
  • js类继承的几种方式
  • javascript如何学
  • shell脚本取n天前的日期
  • nodejs常用内置模块
  • java 使用jar包
  • 国家税务总局,湖北省税务局
  • 四川省地税局地址
  • 江苏省常州市国事业单位国企招录测绘工程研究生公告
  • 北京市国家税务局发票查询平台
  • 诊所备案申请表在哪下载
  • 税务局政务公开目录
  • 税务会计业务处理流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设