项目中使用了vant框架,有个需要做下拉的需求,搞一波。
<van-field
readonly
clickable
label="城市"
:value="projectNameValue"
placeholder="选择城市"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" round position="bottom">
<van-picker
title="标题"
show-toolbar
:columns="projectListArr"
@cancel="showPicker = false"
@confirm="changeConfirm"
/>
</van-popup>
//data中定义
projectNameValue:'', //input框内显示的值
projectListArr: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],, //下拉的数据源,从接口中请求到数据,根据需要变成一维数组,只存name
showPicker:false, //弹出层显示隐藏
//methods中的方法
changeConfirm(val,index){
this.projectNameValue = val; //传值
console.log(index) //索引
// 如果最开始的数据源是数组对象,我的做法是先把数据源变成一位数组(用forEach遍历每一项,push到一个新数组中),用于展示,然后在confirm事件中,拿到索引,根据索引就可以拿到数组中所对应的对象
}