（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自定義二級選單操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。