码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-05-22 16:01:24      阅读:1243      评论:0      收藏:0      [点我收藏+]

标签:err   AC   chcon   input   v-model   UI   name   try   bsp   

后台获取的数组中每一个对象必须要有一个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);
},

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

标签:err   AC   chcon   input   v-model   UI   name   try   bsp   

原文地址:https://www.cnblogs.com/wszxx/p/9072257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!