a-select懒加载+远程搜索

基础知识

• scrollHeght：元素的实际高度（高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数）
• scrollTop：元素被卷去的高度
• clientHeight: 元素的可见高度（高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px）

当滚动条滚到底： scrollHeght - scrollTop == clientHeight

应用

<a-select
    ref="select"
    v-model="searchValue"
	show-search
	style="width: 320px"
	:filter-option="false"
	@popupScroll="handlePopupScroll"
	@search="onTextChange"
>
	<a-select-option v-for="(item, index) in options" :key="index" :value="item.id">
	</a-select-option>
<a-select>


methods: {
    // 获取下拉数据： tableParams分页参数： page: 1, limit: 10. searchValue: 查询参数
    fetch () {
    	getData ({... this.tableParams, searchValue： this.searchValue}).then((res) => {
    		this.options.push(...res.data);
    	})
    }
	// 远程搜索，如果配置了filter-option为true则为本地搜索,本地搜索则在已经加载的options里进行筛选
	onTextChange () {
		this.tableParams.page = 1;
		this.fetch()
	},
	handlePopupScroll (e) {
		const { scrollHeght, scrollTop ,   clientHeight} = e.target;
		if (scrollHeght - scrollTop == clientHeight) {
			this.tableParams.page = this.tableParams.page + 1;
			this.fetch() 
		}
	},
}