a-select:远程搜索——防抖节流处理—

a-select:远程搜索——防抖节流处理——基础积累

效果图
下拉筛选数据：
远程搜索功能：

效果图

在这里插入图片描述

下拉筛选数据：

 <a-selectshow-searchv-model="form.jobPositionCode"placeholder="请选择岗位"style="width: 100%"@change="jobChange":filter-option="filterOption"
><a-select-optionv-for="li in jobPositionList":key="li.code":value="li.code">{{ li.displayText }}</a-select-option>
</a-select>

filterOption(input, option) {return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
},

远程搜索功能：

<a-selectshow-searchv-model="form.executorId"placeholder="请选择人员"style="width: 100%":filter-option="false"@search="getUser"@change="userChange"
><a-select-optionv-for="li in userList":key="li.id":value="li.id">{{ li.userName }}</a-select-option>
</a-select>

debounce(callback, delay = 200) {clearTimeout(this.timeout);this.timeout = setTimeout(() => {callback();}, delay);
},
userChange(val) {this.form.executorName = null;let obj = this.userList.find((item) => item.id == val);if (obj && obj.id) {this.form.executorName = obj.userName;this.$forceUpdate();}},getUser(val) {this.debounce(() => {let params = {Filter: val,current: 1,pageSize: 50,};this.fetchUser(params);});},fetchUser(params) {getList(params).then((data) => {if (data.success) {this.userList = data.result.items || [];}});},