（1）組件解釋：

本組件是為了解決二級聯動的效果編寫的，這里使用了省份和城市分開的效果，具體展示效果，可以參考下面。

---

（2）組件代碼：

<template><div><button @click="showM">{{ value || "選擇省份" }}</button><button @click="showC">{{ value2 || "選擇城市" }}</button><!-- 省份 --><van-popup v-model="showPicker" position="bottom"><van-pickershow-toolbar:columns="columns"@confirm="onConfirm"@cancel="showPicker = false"/></van-popup><!-- 城市 --><van-popup v-model="showPicker2" position="bottom"><van-pickershow-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自定义二级菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。