7 千条数据,搜寻卡顿
<el-select v-model="query.enterpriseId" filterable :filter-method="enterpriseSearchF" placeholder="请抉择企业名称" clearable>
<el-option v-for="item in conInputShowList" :key="item.id" :label="item.companyName" :value="item.id" :disabled="item.disabled">
</el-option>
</el-select>
data() {
return {conInputShowList: [], // 显示的数据
conInputList: [], // 原始接口数据}
},
// 自定义搜寻条件
enterpriseSearchF(val) {
const moreVal = '输出更具体的条件查问更多数据';
const maxNum = 100; // 超出量,超出只显示此量的数据。const key = 'companyName'; // 数据 key,须要搜寻的字段
if (val) { //val 存在
this.conInputShowList = this.conInputList.filter((item) => {if (item[key].indexOf(val) > -1) {return true}
})
if (this.conInputShowList.length > maxNum) {this.conInputShowList = this.conInputShowList.slice(0, maxNum);
const temp = {disabled: true}
temp[key] = moreVal;
this.conInputShowList.push(temp);
}
} else {this.conInputShowList = this.conInputList.slice(0, maxNum);
const temp = {disabled: true}
temp[key] = moreVal;
this.conInputShowList.push(temp);
}
const allTemp = {id: null}
allTemp[key] = '全副';
this.conInputShowList.unshift(allTemp);
},