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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐