console
var Main = {
data() {
return {
tags: [],
options: [],
value: [],
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"]
}
},
mounted() {
this.list = this.states.map((item, i) => {
return { value: i, label: item+1 };
});
},
methods: {
remoteMethod(query) {
console.log('aaaa:', query);
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 3000);
} else {
this.options = [];
}
},
handleChange(a) {
console.log('bbbb:', a);
this.tags.push(a);
this.value = [];
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<div id="app">
<template>
<el-select
v-model="value"
filterable
allow-create
collapse-tags="true"
remote
placeholder="请输入关键词"
:remote-method="remoteMethod"
@change="handleChange"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-tag
v-for="tag in tags"
:key="tag"
closable>
{{tag}}
</el-tag>
</template>
</div>
@import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");