- 思路
- 要先对弹窗层赋值
- 搜索的时候 对弹出层的值筛选
- 确定的时候 目前因为组件原因 value与label 没有绑定 用了2个对象处理
有好的想法可以告知
- pagelook:{position} 用来展示 name: ‘蚂蚁p12’
- form.postInfoVo.position 用来传给后台 id:‘012’
html
<van-field
required
readonly
clickable
name="form.postInfoVo.position"
:value="pagelook.position"
label="职位"
placeholder="请选择职位"
:right-icon='arrow'
@click="changePicker(1)"
:rules="[{ required: true, message: '请选择职位' }]"
/>
// 弹出层
<van-popup position="bottom">
<!--职位选择器的 弹窗 -->
<van-search placeholder="请输入职位名称" v-model="positionSearch"/>
<van-picker
cancel-button-text='取消'
value-key="title" // 绑定显示值得属性
show-toolbar
:columns="getPositionList(1)" // 弹窗显示的数据
@confirm="onConfirmPicker"
@cancel="showPicker = false"
/>
</van-popup>
方法
changePicker(flag) { //改变选择框内容
this.typeFlag = flag
if (flag === 1) {this.positionSearch = ''} // 职位搜索
this.showPicker = true
},
getPositionList(type) { // 获取职位/部门/上级/公司/城市的选择项
let ret = []
if(type ===1){ // 职位
this.positionList.forEach(item => {
if (this.positionSearch) { // this.positionSearch 搜索框里面的值
if (item.title.indexOf(this.positionSearch) > -1){ // item.title 职位的name中文属性
ret.push(item)
}
} else {
ret.push(item) // 没有搜索显示全部 通过value-key="title"展示
}
})
}
},
onConfirmPicker(value) { //选择框消失 赋值
if (this.typeFlag === 1) {
this.pagelook.position = value.title // 中文展示
this.form.postInfoVo.position = value.titleid // (this.positionList[index].titleid) // id传给后台
}
this.showPicker = false
},
可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试