使用element-ui是下拉筛选选择

Posted 2020-11-07 追风少年

后台获取的数组中每一个对象必须要有一个value字段, 因为autocomplete只识别value字段并在下拉列中显示

 

为什么选择input组件群下的el-autocomplete 而不是select下的远程搜索?
因为点击选中时可获取到选中行的附带信息即一个对象, 而select组件下的远程搜索只能选中点击的字符串.

<el-autocomplete v-model="addressForm.linkName" :fetch-suggestions="remoteMethod" placeholder="请输入内容" @select="handleContactSelect"></el-autocomplete>

async remoteMethod(query, cb) {
var list = []
if (query !== ‘‘) {
this.queryContactList.name = query
this.queryContactList.belongId = this.value
try {
const response = await fetchContactDownList(this.queryContactList)
let resData = response.data
if (resData.code === 0) {
this.contactOptions = resData.data.list
for (let i of this.contactOptions) {//在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
i.value = i.contactName
}
list = this.contactOptions
cb(list)
} else {
this.$message({
message: resData.msg,
type: ‘error‘
})
}
} catch (error) {
console.log(error)
}
}
cb(list);
},