前提需求:
vant 并没有提供可搜索的选择器。因为项目下拉项太多,而且不好记,所以需要这个模糊查询的选择器。类似于element-ui 的可搜索Select选择器
<template>
<div style="margin-left: 13%">
<van-field style="width: 80%" required readonly clickable name="meetingId" :value="pagelook.position" label="" right-icon="arrow-up" placeholder="选择与我相关的会议进行筛选" @click="changePicker(1)" :rules="[{ required: true, message: '选择与我相关的会议进行筛选' }]" />
<van-popup position="bottom" v-model="showPicker">
<van-search placeholder="请输入会议名称" v-model="positionSearch" @search="onSearch2(positionSearch)" />
<van-picker cancel-button-text="取消" value-key="lable" show-toolbar :columns="ret" @confirm="onConfirmPicker" @cancel="showPicker = false" />
</van-popup>
</div>
</template>
<script>
import { QueryAboutMeMeetingList, } from '../../../api/oa'
export default {
data() {
return {
ret: [],
typeFlag: '',
positionList: [],
showPicker: false,
positionSearch: '',
pagelook: {
position: ''
},
meetingId: ''
}
},
methods: {
changePicker(flag) {
this.typeFlag = flag
if (flag === 1) {
this.positionSearch = ''
}
this.showPicker = true
this.getPositionList(1)
},
onSearch2(val) {
this.ret = []
this.positionList.forEach((item) => {
if (item.lable.indexOf(val) > -1) {
this.ret.push(item)
}
})
},
getPositionList(type) {
if (type === 1) {
this.positionList.forEach((item) => {
if (this.positionSearch) {
if (item.lable.indexOf(this.positionSearch) > -1) {
this.ret.push(item)
}
} else {
this.ret.push(item)
}
})
}
},
onConfirmPicker(value) {
if (this.typeFlag === 1) {
this.pagelook.position = value.lable
this.meetingId = value.value
}
this.onSearch()
this.showPicker = false
this.ret = []
},
onSearch(obj) {
this.list = new Array()
this.page = 1
this.getWaitDoTasks()
},
QueryAboutMeMeetingList() {
var user = JSON.parse(window.localStorage.user)
let para = {
userCode: user.sub
}
QueryAboutMeMeetingList(para).then((res) => {
res.data.response.forEach((item) => {
var obj = {}
obj.value = item.Id
obj.lable = item.MeetingName
this.positionList.push(obj)
})
})
}
},
mounted() {
this.QueryAboutMeMeetingList()
}
}
</script>