栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

vant自定义二级菜单操作

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vant自定义二级菜单操作

(1)组件解释:

本组件是为了解决二级联动的效果编写的,这里使用了省份和城市分开的效果,具体展示效果,可以参考下面。

(2)组件代码:







(3)展示效果:

还可以结合筛选功能使用:

补充知识:vant二级联动picker选择器

我就废话不多说了,大家还是直接看代码吧~

const citys = {
   '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
   '福建': ['福州', '厦门', '莆田', '三明', '泉州']
 };
data:{
columns: [
  {
 values: Object.keys(citys),
 className: 'column1'
  },
  {
 values: citys['浙江'],
 className: 'column2',
 defaultIndex: 2
  }
],
}
onChange(picker, values) {
  picker.setColumnValues(1, citys[values[0]]);
   console.log(values)
 },

以上这篇vant自定义二级菜单操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/67992.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号