The problem that the data of the el-autocomplete drop-down box must have the key name of value can actually be named at will.

if the background interface has been set with a key name such as data instead of value, then the selected content will not be displayed in the input box after it is selected
maybe many people"s idea is to change the backend interface, but if this interface has been used by many people, it may not be realistic to change the key name
in fact, the solution is very simple: the code is as follows

     <el-autocomplete
        v-model="markWord"
        :fetch-suggestions="querySearchAsync"
        placeholder=""
        @select="handleSelect"
        :trigger-on-focus="false"
      >
        <template slot-scope="{ item }">
          <div class="name">{{ item.warn }}</div>
          <div class="name" style="color:green">{{ item.value=item.term }}</div>
        </template>
      </el-autocomplete>
   
Apr.05,2021

Map the fetched data when

querySearchAsync,
data.content = data.content.map (obj = > {

)
return {
  ...obj,
  value: obj.term
}

})
put the processed data back


value-key attribute. It took me a long time to find this thing

Menu