今天就跟大家聊聊有关“vant怎么实现自定义二级菜单省份和城市分开效果”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“vant怎么实现自定义二级菜单省份和城市分开效果”文章能对大家有帮助。

（1）组件解释：

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

（2）组件代码：

<template>
 <div>
 <button @click="showM">{{ value || "选择省份" }}</button>
 <button @click="showC">{{ value2 || "选择城市" }}</button>
 <!-- 省份 -->
 <van-popup v-model="showPicker" position="bottom">
  <van-picker
  show-toolbar
  :columns="columns"
  @confirm="onConfirm"
  @cancel="showPicker = false"
  />
 </van-popup>
 <!-- 城市 -->
 <van-popup v-model="showPicker2" position="bottom">
  <van-picker
  show-toolbar
  :columns="columns2"
  @confirm="onConfirm2"
  @cancel="showPicker2 = false"
  />
 </van-popup>
 </div>
</template>

<script>
export default {
 mounted() {},
 data() {
 return {
  value: "",
  value2: "",
  columns: ["杭州", "北京", "海南省"],
  city: [
  {
   name: "杭州",
   value: ["广州", "佛山"]
  },
  {
   name: "北京",
   value: ["海淀", "廊坊"]
  },
  {
   name: "海南省",
   value: ["三亚", "海口"]
  }
  ],
  showPicker: false,
  showPicker2: false,
  columns2: []
 };
 },
 methods: {
 onConfirm(value) {
  this.value = value;
  this.value2 = "";
  this.showPicker = false;
 },
 onConfirm2(value) {
  this.value2 = value;
  this.showPicker2 = false;
 },
 showM() {
  this.showPicker = true;
 },
 showC() {
  if (this.value) {
  let self = this;
  self.showPicker2 = true;
  self.city.forEach(v => {
   if (v.name == self.value) {
   self.value2 = self.name;
   self.columns2 = v.value;
   }
  });
  } else {
  }
 }
 },
 components: {}
};
</script>
<style lang="scss" scoped>

</style>

（3）展示效果：

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

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

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

<van-picker :columns="columns" @change="onChange" />

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怎么实现自定义二级菜单省份和城市分开效果内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 怎样用JS实现简单的省市联动效果？

  这篇文章给大家分享的是用JS实现简单的省市联动效果的内容，小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。

• JS中删除类名的方法是什么？

  JS中删除类名的方法是什么？在JavaScript中，想要删除类名我们可以使用remove()来实现。首先我们需要先获取要删除的元素的类型，然后在用remove()方法就可以了。下面我们来看具体的代码。

• VUE项目中如何实现查看pdf文件，乱码情况怎么办

  这篇文章主要介绍了解决vue-pdf查看pdf文件及打印乱码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• JavaScript JSON模块如何工作，过程是怎样

  本篇文章带大家了解一下ECMAScript 新提案：JSON模块，来看看JSON模块是如何工作的，希望对大家有所帮助！

• JS判断是否有class的方法是什么

  方法：1、利用getAttribute()方法获取指定class的属性值；2、利用if语句判断获取到的指定class属性值是否为空即可，语法为“if(获取到的指定class属性值=null){不存在代码;}else{存在代码;}”。