如图示,根据业务需求,需要在左侧红框内实现向下滚动增加更多数据功能 。
方法:通过指令形式实现
1/定义指令:可以在组件内定义cascaderScroll,也可以全局定义指令
directives: {
"cascaderScroll": function (el, binding) {
const cascaderDom = el.querySelector(
".el-cascader__dropdown .el-cascader-menu__wrap"// 滚动条所在元素
);
if (cascaderDom) {
cascaderDom.addEventListener("scroll", function () {
const condition =
this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) {
let temp = this.scrollTop;
binding.value();
setTimeout(() => {
this.scrollTop = temp + 100;// 滚动加载更多时,显示的数据在上次位置基础上往上滑动100
}, 0)
}
});
}
},
},
2/使用指令:loadmore方法即为加载更多的逻辑
<el-cascader
v-model="value"
:options="options"
placeholder="请选择"
v-cascaderScroll="loadmore"
></el-cascader>
注意:定义指令时,要加上如下代码,否则数据渲染后会滑倒最上面一条显示
setTimeout(() => {
this.scrollTop = temp + 100;// 滚动加载更多时,显示的数据在上次位置基础上往上滑动100
}, 0)