今天就跟大家聊聊有关“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数组与字符串转换的实现代码是什么？在JavaScript开发中，都会遇到js的数组与字符串相互转换的情况，转换有几种方法进行转换，我们一定要掌握好这些基础知识

• Vue组件的date需是函数为什么，如何用代码说明

  Vue组件为什么data必须是一个函数？我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。

• 用JS方法怎样制作表单全选或反选的选择功能

  这篇文章主要为大家详细介绍了JavaScript实现表单全选或反选效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS中怎样创建特定长度的数组，方法有哪些

  在JavaScript 中,我们往往会遇到需要使用某些默认值来填充数组的情况,那么都有哪些方式可以完成这样的任务呢?这篇文章主要给大家介绍了关于JS创建或填充任意长度数组的小技巧,需要的朋友可以参考下

• React中setState页面不刷新怎么回事，如何处理

  在开发过程中，经常遇到组件数据无法更新，本文主要介绍了react纯函数组件setState更新页面不刷新的解决，感兴趣的可以了解一下