项目在开发的过程中,有时候接口返回的数据过得,有上千甚至上万条数据,下拉框不能将数据全部列上去,这样页面会出现卡顿,造成性能问题,以及影响用户的体验度,所以进行优化,通过远程搜索(从服务器搜索数据,输入关键字进行查找)可以解决这一问题。
- 这是从接口返回的数据,可以看出数据过于庞大,不能将数据直接进行绑定;
<el-select v-model="patient.operationId" filterable placeholder="请选择" style="width:100%"
:filter-method="selectOperation" class="diagInput" remote clearable multiple
@change="updPatientList('operation_id', 'operationId')">
<el-option v-for="item in operationList" :key="item.id" :label="item.name"
:value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">
{{ item.id }}</span>
</el-option>
</el-select>
- 其中要使用以下属性;
remote | 是否为远程搜索 |
filterable | 是否可搜索 |
filter-method | 自定义搜索方法 |
- operationList 是将接口返回的数据截取了100条,所以下拉框只能显示100条;
async findSSMC() {
await findOperationName().then(res => {
this.operationListAll = res.rows
this.operationList = res.rows.slice(0, 100)
})
},
- operationListAll是接口中返回的所有数据,是个数组;selectOperation这个方法的val就是你在输入框中输入的内容,输入的是字母,会先进行个转大写,或者是汉字,再根据数据进行筛选,返回匹配的内容;如果没有输入,下拉的选项还是之前的100条数据;
selectOperation(val) {
let mh = [];
let vs = this.operationListAll;
if (val) {
let upperVal = val.toUpperCase();
mh = vs.filter(item => item.name.includes(val) || (item.py &&
item.py.toUpperCase().includes(upperVal)));
} else {
mh = vs.slice(0, 100);
}
this.operationList = mh;
},
而updPatientList这个方法是搜索后下拉的内容选中后,输入框的值发生改变进行的方法,在此不多强调。