<el-form-item label="商家名称" prop="operatorName">
<el-autocomplete
v-model="addpriceForm.operatorName"
:fetch-suggestions="querySearchGroup"
placeholder="请输入关键词"
style="width: 95%;"
@select="selectGroup"
@focus="groupListMe"
/>
</el-form-item>
watch: {
'addpriceForm.operatorName': {
deep: true,
handler: function(newVal, oldVal) {
this.groupArr = []// 这是定义好的用于存放下拉提醒框中数据的数组
var len = this.groupList.length// groupList
var arr = []
for (var i = 0; i < len; i++) { // 根据输入框中的值进行模糊匹配
if (this.groupList[i].username.indexOf(this.addpriceForm.operatorName) >= 0) {
arr.push({
value: this.groupList[i].username,
id: this.groupList[i].userId
})
}
}
this.groupArr = arr
}
}
},
方法里:// 模糊搜索
groupListMe() {
operlist().then(res => {
console.log(res)
if (res.msg === 'success') {
this.groupList = []
this.groupArr = []
this.groupList = res.data
for (const item of this.groupList) {
this.groupArr.push({
value: item.username,
id: item.userId
})
}
}
}).catch(err => {
console.log(err)
})
},
querySearchGroup(queryString, cb) {
var groupArr = this.groupArr
cb(groupArr)
},
selectGroup(item) {
this.addpriceForm.operatorId = item.id
this.addpriceForm.operatorName = item.value
},
下拉框模糊搜索
最新推荐文章于 2024-01-15 14:58:09 发布