vant 选择器(类似select下拉选择效果)

 项目中使用了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事件中，拿到索引，根据索引就可以拿到数组中所对应的对象
}