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

html:<template><el-autocompletepopper-class="my-autocomplete"custom-item="my-remote"v-model="state":fetch-sugge

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

vue Element-ui input远程搜索 input建议模版修改