我尝试使用select
remote search
使用vue.js-2.3
和element-ui
库。 Documentation here
在他们提供的示例中,每次用户输入值时,他们都会触发远程搜索。我想debounce
这个。另外,我想制作字段clearable
。
随着小提琴,该领域不可清除,并且第一个选择的值总是回来。
在我的真实代码中,我觉得使用了太多的内存。如果vue-devtools
已打开,如果我选择了某些内容,我的浏览器就会崩溃。
https://jsfiddle.net/24wv1hz7/
<div id="app">
<el-form class="formClientPage" ref="form" label-width="120px" label-position="top">
<el-form-item label="Store" required>
<el-select v-model="storePicked" filterable clearable :filter-method="setStoreInput" placeholder="Select">
<el-option v-for="store in computedStoreList" :key="store.id" :label="store.store" :value="store.id">
<span style="float: left">{{ store.store }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{store.interal_id}}</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
var Main = {
data() {
return {
storePicked: false,
storeSearchValue: '',
storeList: [],
ajaxList: [........],
}
},
computed: {
computedStoreList () {
if (this.storeList) {
return this.storeList.filter(store => {
return store.store.toLowerCase().indexOf(this.storeSearchValue.toLowerCase()) > -1 || store.interal_id.toString().indexOf(this.storeSearchValue) > -1;
})
}
}
},
methods: {
setStoreInput: _.debounce(function (queryStore) { this.storeSearchValue = queryStore; }, 250)
},
mounted () {
const _this = this;
setTimeout(() => {_this.storeList = _this.ajaxList}, 1000);
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')