vue 前端 模糊查询 el-autocomplete
<el-autocompleteclearable@clear="setBlur()"@input="handle":fetch-suggestions="querySearch":trigger-on-focus="false"@select="handleSelect"class="inline-input"v-model.
·
<el-autocomplete
clearable
@clear="setBlur()"
@input="handle"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
@select="handleSelect"
class="inline-input"
v-model="listQuery.fanType"
placeholder="请输入内容"
></el-autocomplete>
methods:{
setBlur() {
// 在点击由 clearable 属性生成的清空按钮时,主动触发失去焦点,解决‘fetch-suggestions’输入建议不提示的bug
document.activeElement.blur()
},
// 清空输入框页面重置
handle(val) {
if (val === '') {
this.getData() // 页面重置的代码
}
},
// 过滤项目和class
async querySearch(queryString, cb) {
if (queryString && queryString.length > 0) {
this.listQuery.fanType = queryString
try {
const data = await getAlllist(this.listQuery.fanType) // search定义在data里
// 赋值给建议列表,渲染到页面
var list = data.resultObj
// 如果list.length等于0,则代表没有匹配到结果。手动给list添加一条提示信息
if (!this.listQuery.fanType) {
list.push({
id: '-1',
value: '无匹配结果'
})
// 调用 callback 返回建议列表的数据
cb(list)
} else {
list = list.map(item => {
return {
value: `${item.fanType}`,
id: `${item.id}`
}
})
list = list.filter(item => {
return item.value.indexOf(this.listQuery.fanType) > -1
})
// 调用 callback 返回建议列表的数据
cb(list)
}
} catch (error) {
console.log(error)
}
}
},
// 选中 input 提示的某一条
async handleSelect(item) {
// item.id等于 -1时,代表没有匹配到任何结果
if (item.id !== -1) {
this.listQuery.fanType = item.value
const data = await getAllmodel(this.listQuery)
this.tableData = data.resultObj.data // 拿到数据进行渲染
}
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)