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自定义二级菜单操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(vant自定义二级菜单操作)