今天就跟大家聊聊有关“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• React antd表格渲染图片的操作是什么

  这篇文章主要介绍了react antd表格中渲染一张或多张图片的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• JavaScript怎样做一个拖拉表格自动计算的功能？

  在Excel中，我们可以通过拖拉表格来实现自动计算表格的内容，那么我们做网页版的Excel表格，这个功能要如何实现呢？接下来小编就给大家分享用JavaScript实现拖拉表格自动计算内容的功能。

• JS代码+CSS样式实现一个动态时钟效果

  时钟是我们查看时间的一种工具，很多人家家里都会摆放一个时钟，那么我们用代码能实现一个时钟效果吗？答案是可以用的，这篇文章主要教大家用JS代码配置CSS样式来实现一个动态的时钟效果，效果如下图所示，下面我们一起来学习下。

• vue中如何添加electron，代码是什么

  这篇文章通过实例代码给大家介绍了vue项目中添加electron的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

• 微信小程序怎样制作tab页面切换，代码是什么

  微信小程序实现tab页面切换效果 本文实例为大家分享了微信小程序实现tab页面切换的具体代码,供大家参考,具体内容如下