位置: 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编辑器的自定义提示)

  • 所得税费用本期金额怎么算
  • 税盘是干什么用的
  • 小规模企业所得税会计分录怎么做
  • 外来原始凭证包括哪些入库单
  • 注册登记费用属于什么科目
  • 报销单与发票金额不符
  • 财务费用最后怎么结转
  • 法人变更注册资金降低以前的债务怎么处理
  • 固定资产可以计入实收资本吗
  • 增值税进项税额不予抵扣的项目包括
  • 购进货物建不动产进项税额抵扣
  • 提取资本公积会计凭证
  • 没有ca证书怎么连接wifi加密设备
  • 结转预交增值税会计处理
  • 分配辅助生产车间成本记账凭证
  • 车辆后期保养费用
  • 小规模纳税人与注册资金有关系吗
  • 外出什么意思?
  • 订购维修设备零件怎么做账?
  • 车提折旧会计分录
  • 冲失业保险分录怎么做
  • 小规模纳税人安装费税率
  • 怎么安装win7系统后怎么安装驱动
  • win7系统咋样
  • macOS Catalina10.15.4值得升级吗 macOS Catalina10.15.4更新了什么
  • 税收保全措施的期限一般不超过几个月
  • icqlite.exe进程的详细介绍 icqlite进程的查询 作用是什么
  • mediacachefiles什么意思
  • 转让旧设备
  • vue打包注意事项
  • vue3全局属性
  • 什么是重大会计事务所
  • 微信公众号服务平台
  • php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
  • vue面试题及答案2021
  • css如何应用
  • 存续分立会计处理原则
  • 购进农产品直接销售核定农产品增值税进项税额计算表
  • 在成本了核算工资怎么算
  • 退回发票金额是什么意思
  • php判断https
  • 帝国cms自动推送插件
  • 分公司开票总公司收款怎么做账
  • access的数据源在哪里设置
  • 集团内部借款利率如何确定
  • 融资租赁开什么发票
  • 无法支付的应付账款为什么计入营业外支出
  • 增值税零税率发票开了2年,没给对方
  • 公司宿舍楼出租让我当甲方违法吗
  • 支付银行贷款利息的会计处理
  • 农业合作社成本有哪些
  • 非金融企业间借款利息开票税率
  • 进口固定资产的汇率怎么算
  • 可供出售金融资产属于什么科目
  • 浅谈基于comsol的锂离子电池仿真
  • win8 photoshop
  • win7推送win10
  • 晨枫U盘启动工具v2.0
  • rundull32.exe
  • 笔记本不支持win8
  • vmware15.5安装mac
  • redhat系统界面
  • linux系统主要用途
  • 新买的笔记本电脑需要做什么
  • 微软认为
  • linux zen3
  • js表格上移下移
  • linux如何一次性删除多个文件
  • 网页设置透明背景
  • unity3d Human skin real time rendering plus 真实模拟人皮实时渲染 plus篇
  • bootstrap 可编辑下拉检索
  • 九九乘法表报
  • js新开一个窗口
  • shell脚本编程实验报告
  • python的设置
  • unity中滚动条控件详解
  • unity 3d游戏开发(第2版)
  • jquery插件使用
  • 北京税务局网上怎么登录
  • 国税注销需要什么资料
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设