vue中element ui 组件Select选择器实现下拉刷新功能

最新推荐文章于 2024-03-14 18:02:16 发布

我的同桌朱丽叶

最新推荐文章于 2024-03-14 18:02:16 发布

阅读量2.2k

点赞数 1

文章标签：大数据

原文链接：https://blog.csdn.net/m0_58996253/article/details/124988036?spm=1001.2014.3001.5502

版权

在开发过程中，下拉框组件一般情况下均为后台返回的数据进行渲染，但是后台有上百条甚至更多数据时，会导致加载速度过慢，内容无法及时渲染的问题。这时就需要我们通过下拉刷新的方式来对Select选择器进行处理。其功能效果与分页查询接口一致。上代码：

Vue.directive('scroll-loadMore', {

bind(el, binding) {

const SELECTWRAP_DOM = el.querySelector(

'.el-select-dropdown .el-select-dropdown__wrap'

)

SELECTWRAP_DOM.addEventListener('scroll', function () {

const condition =

this.scrollHeight - this.scrollTop <= this.clientHeight

if (condition) {

binding.value()

}

})

}

})

1.首先在main.js文件中为Vue增加一个方法 (完整代码，直接复制粘贴即可)

2.在我们的Select选择器中绑定事件 v-scroll-loadMore="loadmore"

3.这时就可以去methods中定义此事件事件会在下拉到底的时候触发

4.我本人是通过与watch搭配使用

(1).data中定义后端接口页码的参数，默认为0 如：PageIndex: 0

(2).在watch监听PageIndex 当他发生变化时调用后台接口请求数据，同时它也是接口需要的页码参数

(3).在生命周期中随意调用一个函数，此函数只做一件事使PageIndex变为1即可

(4).当PageIndex改变后watch会请求接口数据，参数为1，只会返回第一页的数据....目的初步达成

(5).Select选择器中自带@visible-change事件参数为boolean值鼠标点进选择框中为true,移出为false 此时需要进行判断（为true时 this.PageIndex = 1）（为false时 this.PageIndex = 0 并将data中用来接收后端数据的数组重新清空
————————————————
版权声明：本文为CSDN博主「前端小郜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_58996253/article/details/124988036