vue element ui el-autocomplete模糊查询功能
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
文本框获取焦点的时候发送请求,拿回来数据,想搜索数据中的某个值,直接搜索功能,效果图如下:
代码如下:
注意一点:el-autocomplete中数组值的结构必须是{value:'值'}
<el-autocomplete
v-model="formInline.group"
size="mini"
:fetch-suggestions="querySearchGroup"
@select="selectGroup"
@focus="groupListMe"
placeholder="请输入内容"
></el-autocomplete>
js:
watch:{
'formInline.group': {
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].name.indexOf(this.formInline.group) >= 0) {
arr.push({
value:this.groupList[i].name,
id:this.groupList[i].id
})
}
}
this.groupArr = arr
}
},
},
methods:{
groupListMe() {
this.$http.post(url, {
name:this.formInline.group
}).then(res => {
if (res.data.success) {
this.groupList = []
this.groupArr = []
this.groupList = res.data.data.result
for(let item of this.groupList) {
this.groupArr.push({
value:item.name,
id:item.id
})
}
}
})
.catch(err => {
console.log(err)
})
},
querySearchGroup(queryString, cb) {
var groupArr = this.groupArr;
cb(groupArr);
},
selectGroup(val) {
this.groupId = val.id
},
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)