directives: {
'el-select-loadmore': {
inserted(el, binding) {
const SELECTWRAP_DOM = el.querySelector(
'.el-select-dropdown .el-select-dropdown__wrap'
);
SELECTWRAP_DOM.addEventListener('scroll', function() {
/**
* console.log(this.scrollHeight,this.clientHeight);
* 收起时 this.scrollHeight this.clientHeight 均为0;
*/
if(this.scrollHeight === 0) return;
binding.value();
});
}
}
},
/**
* 客户搜索框触发远程搜索
* @params query 客户搜索模糊 参数
* */
remoteMethod(query) {
/** 滚动条还原 */
this.$refs.customerRef.$children[1].$children[0].wrap.scrollTop = 0;
this.$refs.customerRef.$children[1].$children[0].moveY = 0;
/** 每次输入框内容发生变更---将searchQuery置位 */
this.searchQuery = query;
/** 每次触发将页码置位 */
this.searchPageNum = 1;
/** 清空备选项 */
this.customerNameOptions = [];
/** 如果输入为空格 则不触发查询 */
if (!String(query).trim()) return;
let params = this.generateParams();
params.customerName = query.trim();
this.searchCustomer(params,1);
},
/** 自定义指令-加载更多客户 */
loadmore() {
if (!String(this.searchQuery).trim()) return;
if(this.searchPageNum * 10 > this.customerNum) return;
this.searchPageNum = this.searchPageNum + 1;
let params = this.generateParams();
params.customerName = this.searchQuery.trim();
params.pageIndex = this.searchPageNum;
this.searchCustomer(params,2);
},
el-select 远程搜索 触底分页搜索
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 第一种方法:组件自定义方法 (支持大小写的前提是后端需要提供大写和小写的字段,或者自己将value值转换) 第一步...
- 适用场景 在项目中,我们需要运用到很多来自后端返回的数据。有时是上百条,有时甚至上千条。如果加上后端的多表查询或者...