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

猜你喜欢

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

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

• JS的语法约定包括哪些?程序调试原理怎样理解？

  本文给大家分享一些JavaScript的基础知识，这里我们会一起了解JS的语法约和程序调试原理的内容，本文对于新手学习JavaScript有一定的帮助，需要的朋友可以了解看看。

• 用JS怎样做点击复制文本的功能？

  用JS怎样做点击复制文本的功能？点击按钮实现复制文本的功能还是比较实用的，例如下本实现的复制邀请码的功能，此外点击复制文本的应用场景还有很多。感兴趣的朋友可以参考下文实例，接下来我们就一起来了解看看。

• Node.js是不是单线程，怎么理解

  为什么说 Node.js 不是完全的单线程？如何理解？下面本篇文章就来带大家探讨一下，希望对大家有所帮助！

• 前端取消请求的几种方式是什么，有哪些要点

  这篇文章主要为大家介绍了前端取消请求及取消重复请求方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪