1.样式页面代码
<el-form-item label="商品编码" prop="shopCode">
<el-autocomplete class="inline-input" v-model="form.shopCode"
value-key="shopCode"
:fetch-suggestions="shopSearch"
placeholder="请输入商品编码"
:trigger-on-focus="false"
@select="handleSelect"
style="width: 100%" >
</el-autocomplete>
</el-form-item>
说明：1.输入建议对象中用于显示的键名,组件默认的键名是value。
2.返回输入建议的方法，仅当你的输入建议数据 resolve 时，
通过调用 callback(data:[]) 来返回它。
3.当选中后，触发的方法。
2.js代码
export default {
created() {
//调用获取数据的接口
this.getShopList();
}
methods{
//获取数据的接口
getShopList() {
getShopByCode().then(response => {
this.shopList = response.data;
console.log(this.shopList)
})
},shopSearch(queryString, cb) {
var shopList = this.shopList;
var results = queryString ? shopList.filter(this.createFilter(queryString)) : shopList;
// 调用 callback 返回建议列表的数据
console.log(results); cb(results);
},
handleSelect(item) {
this.form = {};
this.form = item;
console.log(item);
},
createFilter(queryString) {
return (shopList) => {
return (shopList.shopCode.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
}
}
}
3.实际效果演示
