vue Element-ui input 远程搜索与修改建议显示模版的示例代码

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 远程搜索与修改建议显示模版的示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网之家网站的支持！