【项目经验】：项目中下拉框数据太多造成页面卡顿（二）

一.项目需求

        下拉框下拉列表数据是由后端返回的，而且他会变化，所以数据不是写死的而且数据量大。上一篇博客http://t.csdn.cn/sSNTa我们是用的数据懒加载的方式，这次我们使用远程搜索的方式解决这个问题。

二.用到的组件方法介绍

filterable

是否可搜索

boolean

—

false

remote

是否为远程搜索

boolean

—

false

remote-method

远程搜索方法

function

—

—

三.代码

<template><div class="content"><el-select v-model="value" filterable remote placeholder="请输入关键词" :remote-method="remoteMethod" @change="change"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div>
</template><script>
export default {name: "list",data () {return {options: [],value: "",list: [],loading: false,states: []}},methods: {init () {for (let i = 0; i < 10000; i++) {let obj = {value: `"${i}"`,label: `数据${i}`};this.states.push(obj);}this.options = this.states.slice(0, 50);// console.log(this.options);},remoteMethod (val) {console.log("val", val);this.$axios(url, { val: val }).then(res => {// 后端通过模糊查询返回，也可以前端自己查this.options = res})},// 每次选中的下次打开显示到第一个change (val) {let index = this.states.findIndex(item => {return item.value == this.value;})this.states.unshift(this.states.splice(index, 1));}},mounted () {this.init()}
}
</script><style scoped></style>