The problem of using el-autocomplete in vue element ui does not render data

The problem of using el-autocomplete in vue element ui does not render data

During the project development process, because the amount of data is too large, it is inconvenient to use the select drop-down box, so I thought of el-autocomplete to search data from the server, but in the process of using it, el-autocomplete has not been able to render the data. Later, I checked the API carefully and found that there is a value-key attribute that can solve this problem.

The most important thing is to set the node-key to the field name you display, as shown in the figure:

js code

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 code

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