A bit of context: It is in the testing process that the receipt function is often used. After downloading the purchase order on the PC, you can go to the corresponding function of the APP, enter many fields, upload pictures and so on, and finally submit it. Therefore, I decided to add a small tool on the platform, fast delivery, convenient testing.

So, in the receiving operation, there should be the role of consignee. For better applicability, I decided to make a search box that supports real-time searchers. So, the Select selector remote search is found on elementUI.

Here’s how front-end newbies can use these components on elementUI:

  1. Work with the official sample to see how the component actually works and whether it really meets your needs.
  2. Expand the sample code to focus on the fields, methods, and so on used.
  3. Copy sample code and replace it with your actual data, fields, etc., until debugging succeeds.
<template> <el-select V-model ="value" multiple filterable remote reserve-keyword placeholder=" :remote-method="remoteMethod" :loading="loading"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { data() { return  { options: [], value: [], list: [], loading: false, states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"] } }, mounted() { this.list = this.states.map(item => { return { value: `value:${item}`, label: `label:${item}` }; }); }, methods: { remoteMethod(query) { if (query ! == '') { this.loading = true; setTimeout(() => { this.loading = false; this.options = this.list.filter(item => { return item.label.toLowerCase() .indexOf(query.toLowerCase()) > -1; }); }, 200); } else { this.options = []; } } } } </script>Copy the code

From the sample code, you can see:

  • statesIt should store the data returned by my back-end interface. In the example, States is a list, and my interface also returns a list, but its elements are objects, and each object holds information about a different person.
  • mounted()Method, after rendering is complete, willstatesList data, further processed into an object, withmap()Returns a new list and assigns a value tothis.list.
  • In the end inremoteMethod(query)Method, based on the input parameter query, yesthis.listFilter the data in, return the matching data, assign the value tothis.options, so that the drop-down list shows the results.

    Here,.indexOf(query.toLowerCase()) > -1Greater than minus 1 means whatever you have, whether it’s at the beginning, whether it’s in the middle, whether it’s at the end. For example, search “big week”, you type “big” or “zhou”, you can find.

Go back to the official example and happily start tinkering with the code:

// mounted() {this.list = this.states.map(item => {return {value: '${item.id}', label: `${item.role_name}-${item.ad_real_name}` }; }); },Copy the code
RemoteMethod (query) {if (query! == '') { this.loading = true; this.$axios.post("/api/receiveGoodsQuickly/getWmsAdminInfo", { "ad_real_name": query, "mchid": 6001 }).then((response) => { this.states = response.data['content']; }); setTimeout(() => { this.loading = false; this.options = this.list.filter(item => { return item.label.toLowerCase() .indexOf(query.toLowerCase()) > -1; }); }, 1000); } else { this.options = []; }},......Copy the code

But the actual execution effect is like this: I input the first “zhang SAN”, no result. When I type “Zhang SAN” again, the corresponding result is returned. I continue to input “li Si”, still have no result, input again “Li Si”, the result came out……

Later, I found that I could not directly use the official example, because the sample code directly initialized the data in the States, and I actually had to request the back-end interface to get the data. So the first time I call the remoteMethod method, this. List is actually null. When I call it a second time, the result of the previous query actually appears.

Finally, the solution was to add processing steps to computed, which acts as a listener, so that the processed data can be obtained immediately.

computed: { listSet() { return this.states.map(item => { return { value: `${item.id}`, label: `${item.role_name}-${item.ad_real_name}` }; }); }},Copy the code
setTimeout(() => { this.loading = false; This. options = this.listSet.filter(item => {// here this.list, This.listset return item.label.tolowerCase ().indexof (query.tolowerCase ()) > -1; }); }, 1000);Copy the code

After debugging, the search results are displayed in real time.