vue element ui中使用el-autocomplete不渲染数据的问题

vue element ui中使用el-autocomplete不渲染数据的问题

在项目开发过程中，因为数据量过大，不方便使用select下拉框，于是想到从服务端搜索数据的el-autocomplete，但是在使用的过程中，el-autocomplete一直不能够渲染数据，后来仔细查阅api发现有一个value-key属性可以解决这个问题。

最主要的是要将node-key设置为你显示的字段名，如图所示：

js代码

getAllFilterData(){
$.ajax({
url:'请求的数据url',
type:'GET',
success:function(res){
if(res.code == 0){
vm.fileterData = res.data
}
}
})
},
querySearchAsync(queryString, cb) {
var restaurants = vm.fileterData;
var results = queryString ? restaurants.filter(vm.createStateFilter(queryString)) : restaurants;
clearTimeout(vm.timeout);
vm.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createStateFilter(queryString) {
return (state) => {
return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
if(item){
vm.applicationColumn.orgId = item.id
}
},

html代码

<el-autocomplete style="width:100%" clearable v-model="applicationColumn.orgName"
value-key="name" :fetch-suggestions="querySearchAsync" placeholder="请选择机构"
@select="handleSelect"></el-autocomplete>

• 点赞
• 收藏
• 分享
• 文章举报