html:

<template> <el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默認空" icon="close" :on-icon-click="handleIconClick"> </el-autocomplete></template>

js:

<script>import Vue from 'vue'Vue.component('my-remote', { functional: true, render: function(h, ctx) {  var item = ctx.props.item;  let str = h('li', ctx.data, [   h('div', { attrs: { class: 'name' } }, [item.value]),   h('span', { attrs: { class: 'addr' } }, [item.address])  ]);  if (item.str) { // 根據參數不同 修改原模版結構   str = h('center', { attrs: { class: 'ems' } }, [item.str])  }  return str }, props: {  item: { type: Object, required: true } }});export default { data() {  return {   restaurants: [],   state: '',   timeout: null,   _that: {} // 記錄this，用來發起http請求  }; }, methods: {  querySearch(queryString, cb) {   let restaurants = this.restaurants;   if (restaurants.length > 0) { // 如果參數都沒變化，則使用緩存數據，避免請求沉積    let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;    cb(results);   } else {    const qtype = ‘參數';    this._that.$http('/inner', { qtype: qtype })     .then((res) => {       restaurants = this.loadAll(res);       this.restaurants = restaurants;       let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;       cb(results);     })     .catch((err) => {      restaurants = this.loadAll();      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;      cb(results);     });   }  },  createFilter(queryString) {   return (restaurant) => {    if (restaurant.str) return false;    return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);   };  },  loadAll(data) {   let serier = [];   if (data) {    for (let i = 0, l = data.length; i < l; i++) {     let a = data[i];     let b = '';     if (typeof a === "object") {      b = a[1];      a = a[0];     }     serier.push({ "value": a, "address": b })    }   } else { // 如果沒有請求到數據，則顯示暫無數據！    serier.push({ "str": '暫無數據' })   }   return serier;  },  handleIconClick(ev) {   this.state = "";  } }, mounted() {  this._that = this; }}</script>　

css:

<style lang="scss">.my-autocomplete { li {  line-height: normal !important;  padding: 7px !important;   .name {   text-overflow: ellipsis;   overflow: hidden;  }  .addr {   font-size: 12px;   color: #b4b4b4;  }   .highlighted .addr {   color: #ddd;  } } .ems {  font-size: 12px;  color: #b4b4b4; }}</style>　

總結

以上所述是小編給大家介紹的vue Element-ui input 遠程搜索與修改建議顯示模版的示例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網之家網站的支持！