elementui,vue项目开发中el-select支持模糊搜索【下拉选择框支持模糊搜索】
做项目的过程中需要下拉选择框支持模糊查询,呐,下面这些代码希望对你有帮助html代码<el-form-item label="销售产品" prop="branchFen"><el-autocompletev-model="ruleForm.branchFen":fetch-suggestio
·
做项目的过程中需要下拉选择框支持模糊查询,并在清空的时候自动展示数据列表,下面这些代码希望对你有帮助
html代码
<el-form-item label="销售产品" prop="branchFen">
<el-autocomplete
ref="listMohu"
v-model="ruleForm.branchFen"
:fetch-suggestions="querySearchGroup"
placeholder="请选择"
clearable
class="filter-item"
style="width: 100%; margin-top: 0px"
@select="selectGroup"
@focus="groupListMe"
@clear="clearSearch"
/>
</el-form-item>
js部分代码
data中的数据
ruleForm: { branchFen: ''}
groupArr:[]
groupId:''
methods方法
querySearchGroup(queryString, cb) {
var groupArr = this.groupArr;
cb(groupArr);
},
selectGroup(val) {
this.groupId = val.id;
},
groupListMe(){
this.$sys_doAjax({
method: 'GET',
path: '接口地址',
data: {
parent: '' //请求参数
}
})
.then((data) => {
if (code === '0') {
this.groupList = [];
this.groupArr = [];
this.groupList = data.body.organization;
for (const item of this.groupList) {
this.groupArr.push({
value: item.name, //这里一定是value: '值'
id: item.id
});
}
}
})
.catch((err) => {
vm.$kpAlert(err.message);
});
}
//清空自动显示列表
clearSearch() {
this.$refs.listMohu.handleFocus();
},
更多推荐
已为社区贡献7条内容
所有评论(0)