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

您可能感兴趣的文章:

• vue 2.0项目中如何引入element-ui详解
• vuejs+element-ui+laravel5.4上传文件的示例代码