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

  • 纳税申报的具体要求
  • 建筑业小规模纳税人 扣除分包款 开票
  • 个体经营所得税核定征收2023标准
  • 用友t3软件的系统内没有利润表模块
  • 定期定额征收和核定征收一样吗
  • 什么情况下当月不排卵
  • 个税申报的收入是应发工资还是实发工资
  • 申报个人所得税是按应发工资还是实发工资
  • 一般纳税人广告
  • 微商怎么交易流程
  • 子公司的实收资本合并报表怎么做
  • 建筑业一般计税税率
  • 税收抵免与税收的区别
  • 事业单位固定资产
  • 职工福利企业所得税
  • 小规模转为一般纳税人最新规定
  • 收购不良资产收益怎么算
  • 开具发票时提示离线发票累计金额超限?教你如何处理
  • 小微企业计算公式
  • 美国税改“梦想”很丰满,显示很骨感
  • 老版普通增值税发票还能用吗
  • 挂靠别人的施工单位资质,要交什么税?
  • 应税消费品用于连续生产应税消费品的
  • 结转法定盈余公积会计分录怎么写
  • mac dns 设置
  • el-cascader动态加载多级
  • 跨境电商小规模与一般纳税人
  • 收不到的物业费是否增值税确认收入
  • 怎样判断事情
  • 劳务报酬必须要和工资申报吗
  • 装电脑系统的方法和步骤
  • u盘如何装系统win7
  • PHP:stream_context_get_params()的用法_Stream函数
  • u盘写保护格式化
  • 其他应收款可以和其他应付款对冲吗
  • 房屋租金应缴纳多少
  • 计提职工养老保险金
  • php数据库删除数据
  • Yii2中简单的场景使用介绍
  • 比斯蒂荒野上的“外星孵化场”,新墨西哥州 (© Ian Shive/Tandem Stills + Motion)
  • framework开发教程
  • 亚伯拉罕湖中的树,加拿大艾伯塔 (© Coolbiere/Getty Images)
  • 内外参标定
  • 明星身价几十亿
  • 研发支出资本化支出属于什么科目
  • java枚举写法
  • 财务费用的增加记在哪一方
  • 经销商自用车是指什么
  • phpmail
  • 出口运费怎么入账
  • 工程项目该如何分类
  • 四联发票都需要盖章吗
  • 使用sql server查询不到会返回什么
  • 上年度亏损,本年要交所得税吗
  • 过户车子需要带什么证件
  • 非居民企业所得税征收方式鉴定表
  • 网上银行回单可以做账吗
  • 长期借款和长期贷款一样吗
  • 转账支票的密码需要填写吗
  • 进项和销项税月底有余额吗
  • 收到个人退回的社保费,怎样做分录
  • windows2003r2安装教程
  • solaris 10安装
  • 苹果电脑mac系统怎么用
  • Fedora Core 5.0 安装教程,菜鸟图文教程(linux text)
  • 电脑windowxp系统重装
  • win8.1如何更改密码
  • bsd模式是什么意思
  • lnmp一键安装包是什么
  • 电脑系统win8
  • w10系统如何安装
  • win7系统怎么设置浏览器主页
  • 网卡流量怎么计算
  • 编程中的python
  • 数据库的基本操作语句有哪些
  • js应用实例
  • shell脚本语句
  • 山东省税务局网上办税服务厅
  • 简述会计估计及其特点
  • 招投标文件未规定怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设