picker多选 vant_vant框架picker选择器形式列表，以及封装

最新推荐文章于 2026-05-18 09:23:25 发布

原创最新推荐文章于 2026-05-18 09:23:25 发布 · 3.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#picker多选 vant

本文总结了VantUi中不同类型的下拉选择器组件，包括DropdownMenu、picker单选模式、picker对象模式以及多选的van-dropdown-item和van-checkbox-group的使用方法，详细展示了各组件的配置和事件响应。

以下是VantUi插件中常用的各种选择器下拉列表，项目中遇到，就在这里总结以下，下面是代码

第一种Vant -DropdownMenu 下拉框单选形式

Array = [

{

text: "东来汽车维修",

value: 0

}, {

text: "广汽维修中心",

value: 1

}]

第二种picker选择器下拉框数组单列模式单选模式

数组形式： ['杭州', '宁波', '温州', '嘉兴', '湖州']

readonly

clickable

label="居住城市"

:value="value1"

placeholder="选择最喜欢居住的城市"

@click="showPicker = true"

show-toolbar

title="选择最喜欢居住的城市"

:columns="city"

@cancel="onCancel"

@confirm="onConfirm1"

第三种picker选择器下拉框数组对象模式单选模式

cityArray: [{cityName: '杭州', id: 10},{cityName: '宁波', id: 12},{cityName: '温州', id: 14}]

readonly

clickable

label="旅游城市"

:value="value2"

placeholder="选择你最喜欢的城市"

@click="showPicker2 = true"

show-toolbar

value-key="cityName"

title="选择你最喜欢的城市"

:columns="cityArray"

@cancel="showPicker2 = false"

@confirm="onConfirm2"

第四种van-dropdown-item下拉框多选

确认

第五种van-checkbox-group下拉框多选

readonly

clickable

label="居住城市"

:value="value4"

placeholder="选择去过的城市"

@click="showPicker4 = true"

取消

选择去过的城市

确定

v-for="(item, index) in cityArray"

clickable

:key="index"

:title="item.cityName"

@click="toggle(index)"

:name="item"

ref="checkboxes"

slot="right-icon"

export default {

data() {

return {

value: 0,

value1: '',

value2: '',

value3: '',

value4: '',

cityId: '',

cityValue: '',

showPicker: false,

showPicker2: false,

showPicker3: false,

showPicker4: false,

city: ['杭州', '宁波', '温州', '嘉兴', '湖州'],

cityArray: [

{cityName: '杭州', id: 10},

{cityName: '宁波', id: 12},

{cityName: '温州', id: 14},

{cityName: '嘉兴', id: 16},

{cityName: '湖州', id: 18}

switch1: false,

switch2: false,

switch3: false,

playCityName: [],

playCityId: [],

companyName: [

{

text: "东来汽车维修",

value: 0

}, {

text: "广汽维修中心",

value: 1

}],

result: [],

};

methods: {

onCancel() {

this.showPicker = false;

onConfirm1(value) {

this.$toast(value)

this.value1 = value;

this.showPicker = false;

onConfirm2(value) {

console.log(value)

this.$toast(value.cityName+value.id)

this.value2 = value.cityName

this.showPicker2 = false;

onConfirm3(value) {

this.$refs.item.toggle();

this.value3Arr = []

if(this.switch1 === true) {

this.value3Arr.push('杭州')

}

if(this.switch2 === true) {

this.value3Arr.push('宁波')

}

if(this.switch3 === true) {

this.value3Arr.push('温州')

}

this.value3 =this.value3Arr.join(',')

onConfirm4() {

this.playCityName = []

this.playCityId = []

this.result.forEach(item => {

this.playCityName.push(item.cityName)

this.playCityId.push(item.id)

})

//这里要转成字符串形式再进行赋值，因为v-model此时接受的是字符串而不是数组

// this.value4 = this.playCityName

this.value4 = this.playCityName.join(',')

this.cityId = this.playCityId

this.showPicker4 = false;

toggle(index) {

this.$refs.checkboxes[index].toggle();

}

};

.select-wrapper {

width: 100%;

height:1000px;

overflow-y: scroll;

background: #fff;

}

.van-dropdown-menu__title::after {

position: absolute;

top: 50%;

right: -67px !important;

margin-top: -5px;

border: 3px solid;

border-color: transparent transparent currentColor currentColor;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

opacity: 0.8;

content: "";

}

.title {

background: #007aff!important;

opacity: .5;

color: #fff;

}

.he-44 {

height: 44px;

line-height: 44px;

}

.cancel {

color: #007aff!important;

}

.tip {

color: black;

}

.confirm {

color: #007aff!important;

}