1、页面部分
<el-form-item label="供应商号" prop="lifnrid">
<el-autocomplete
class="el-input"
style="width: 545px"
v-model="form.lifnrid"
:fetch-suggestions="getMbLFA"
placeholder="请输入供应商号"
@select="selectGroup"
:trigger-on-focus="false">
</el-autocomplete>
</el-form-item>
fetch-suggestions
是一个返回输入建议的方法属性,在该方法中你可以在输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中.
2、变量定义初始化部分:
data() {
return {
// 供应商表格数据
mbLFA1List: [],
// 表单参数
form: {},
}
}
3、:fetch-suggestions方法getMbLFA()
/*搜索供应商*/
getMbLFA(queryString, cb){
if(this.form.lifnrid!=null && this.form.lifnrid!=''){
listMbLFA1({lifnrid:this.form.lifnrid}).then(res=>{
var arr = [];
for (var i = 0; i < res.rows.length; i++){
if (res.rows[i].lifnrid.indexOf(this.form.lifnrid) >= 0){
arr.push({
value:res.rows[i].lifnrid + '-' +res.rows[i].name1,
id:res.rows[i].lifnrid,
label:res.rows[i].name1,
})
}
}
this.mbLFA1List = arr;
cb(this.mbLFA1List);
});
}
},
4、 在下拉框进行选择时@select输入框赋值方法selectGroup()
selectGroup(item) {
this.form.lifnrid = item.id;
this.doAutoFill();
},
结论:el-autocomplete(动态搜索)控件在操作流畅度方远大于el-select(先加载全部待选数据-数据仅限于初始化的数据)。