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

  • 华为watch3移动eSIM如何开通

    华为watch3移动eSIM如何开通

  • 快手被限流了有提示吗(快手被限流了有通知吗)

    快手被限流了有提示吗(快手被限流了有通知吗)

  • 小米笔记本numlock键在哪(小米笔记本numlock键)

    小米笔记本numlock键在哪(小米笔记本numlock键)

  • 抖音企业号能绑定几个(抖音企业号能绑定个人银行卡吗)

    抖音企业号能绑定几个(抖音企业号能绑定个人银行卡吗)

  • iphone6有暗黑模式吗(苹果6p的暗黑模式在哪)

    iphone6有暗黑模式吗(苹果6p的暗黑模式在哪)

  • 抖音隐藏了10个无效视频是什么意思(抖音隐藏了10个无效视频怎么删除)

    抖音隐藏了10个无效视频是什么意思(抖音隐藏了10个无效视频怎么删除)

  • g1610是哪一年的(g1610是哪一年的上市的)

    g1610是哪一年的(g1610是哪一年的上市的)

  • 秘乐怎么发自己的视频(秘乐怎么卖)

    秘乐怎么发自己的视频(秘乐怎么卖)

  • 苹果11pro是磨砂的吗(苹果11pro磨砂黑后盖用久了会掉漆吗)

    苹果11pro是磨砂的吗(苹果11pro磨砂黑后盖用久了会掉漆吗)

  • plus版和正片区别(plus版和正常版)

    plus版和正片区别(plus版和正常版)

  • 苹果退款后充值的东西还在吗(苹果退款后充值的快币还在吗)

    苹果退款后充值的东西还在吗(苹果退款后充值的快币还在吗)

  • p30pro和p40的区别(p30pro和p40pro区别)

    p30pro和p40的区别(p30pro和p40pro区别)

  • 512kbps是什么概念(512 kbps)

    512kbps是什么概念(512 kbps)

  • 现代计算机的主要特点(现代计算机的主要应用领域)

    现代计算机的主要特点(现代计算机的主要应用领域)

  • 主频主要反映了计算机的(主频的说法)

    主频主要反映了计算机的(主频的说法)

  • 2017款ipad是第几代(17款ipad属于第几代)

    2017款ipad是第几代(17款ipad属于第几代)

  • nova3为什么没有nfc(华为nova3不支持nfc怎么办)

    nova3为什么没有nfc(华为nova3不支持nfc怎么办)

  • 笔记本充满电后是继续充还是拔掉(笔记本充满电后第二天就没电了)

    笔记本充满电后是继续充还是拔掉(笔记本充满电后第二天就没电了)

  • 组织结构设计的原则是什么(组织结构设计的弹性原则就是要求部门)

    组织结构设计的原则是什么(组织结构设计的弹性原则就是要求部门)

  • 手机微博如何删除分组(手机微博如何删除浏览记录)

    手机微博如何删除分组(手机微博如何删除浏览记录)

  • 拼多多评价能上传视频吗(拼多多评价能上传几秒视频)

    拼多多评价能上传视频吗(拼多多评价能上传几秒视频)

  • 爱追剧数据错误是怎么回事(爱追剧数据错误怎么办)

    爱追剧数据错误是怎么回事(爱追剧数据错误怎么办)

  • 三星s11什么时候上市(2020年三星s11)

    三星s11什么时候上市(2020年三星s11)

  • 怎么分辨苹果手机屏幕是否是原装屏(怎么分辨苹果手机是不是翻新机?)

    怎么分辨苹果手机屏幕是否是原装屏(怎么分辨苹果手机是不是翻新机?)

  • 抖音直播pk怎么弄(抖音直播pk怎么设置时间)

    抖音直播pk怎么弄(抖音直播pk怎么设置时间)

  • 主板灯亮开机没反应(主板灯亮开机没反应风扇不转 过一会风扇突然又转了)

    主板灯亮开机没反应(主板灯亮开机没反应风扇不转 过一会风扇突然又转了)

  • 自来水适用的税率是多少
  • 一般纳税人什么情况可以开3%的发票
  • 培训属于什么服务行业
  • 制造费用多结转了下月如何调整
  • 个体工商户网上报税流程
  • 属于期间费用抵减项目
  • 赠与和继承哪个划算
  • 本月征期2021
  • 不能税前扣除的费用有哪些
  • 泡菜增值税率
  • 固定资产进项税的账务处理
  • 税务登记五证合一是哪五证
  • 法人给公司基本户打款
  • 新企业残保金免交三年超过30人
  • 企业账面库存过大应怎样处理好
  • 工会筹备金如何补报
  • 对公账户长期不用怎么收费
  • 如何核算卷烟消费税税率?
  • 汽车进项税额
  • windows11 怎么更新
  • php oci
  • 代收代付的垃圾清运费没发票能入账吗
  • 计提房租记什么科目
  • 增值税不允许抵扣计入什么科目
  • phpstudy怎么配置php环境
  • php制作网页
  • 企业应收票据贴现 哪个部门负责
  • 股权投资准备的主要内容
  • vue如何销毁页面
  • php注册功能的实现
  • php接口验证
  • vscode2010下载
  • 印花税计提比例是多少
  • 红字冲销的增值税发票怎么处理
  • 小规模升级一般纳税人需要多久
  • 土地开发是什么
  • 研发费用加计扣除75%还是100%
  • 待认证进项税额是二级科目还是三级科目
  • MySQL5.1忘记root密码的解决办法(亲测)
  • sql serverjdbc
  • 付员工经济补偿金的分录
  • 企业成立刻章流程
  • 蔬菜开票税率是多少
  • 土地入固定资产计提折旧吗
  • 经审计的财务报表是否要会计师事务所盖章
  • 利润与利润率之差公式
  • 金税三期税收管理系统打印控件
  • 砖厂的会计分录有哪些
  • 车间购买劳保费用会计分录
  • 清算申报在哪里报
  • 农民工专户里的钱能转出来吗
  • 印花税怎么申报缴纳
  • 其他业务收入的现金流量项目
  • 购房发票丢了怎么收房
  • 现代服务业包括哪些项目
  • 承包工程合同书
  • 其他应付款的借贷方分别表示什么
  • 总账的建立
  • win8系统安装教程图解
  • xp系统重装u盘
  • Windows Server 2003环境更改Boot.ini文件
  • 物联网 iot
  • windows ftp软件
  • SPBBCSvc.exe - SPBBCSvc进程是什么文件 有什么作用
  • win7win8win10哪个流畅
  • 怎么删除windows7
  • powerremind.exe
  • win7安装kb3170455失败
  • win10喇叭图标有x
  • quick cocos2dx-Lua中的自定义事件的使用
  • 用linux搭建服务器
  • android内存泄露 工具
  • javascript快速入门
  • python字典有什么用
  • javascript编程语言
  • 安卓两页合并到下一页
  • 四川国家税务局官网
  • 广东省电子税务局登录方式
  • 请问各位专家金线吊乌龟有什么功效
  • 融资租赁公司购入老旧租赁资产会计处理
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设