vue3中Element plus的el-select组件的触底加载功能的实现
描述：项目中老板突发奇想，要求做个能滑动到底就自动加载一些数据的选择控件，看了很多教程，结果都失败了。原因竟是我使用的element使用的是新版的，而新版的elem在模态框组件的展示时使用了<teleport to="body"><div></div></teleport>，导致querySelector获取dom操作失败。所以，改用document
#献祭上美照，吸引流量
描述：项目中老板突发奇想，要求做个能滑动到底就自动加载一些数据的选择控件，看了很多教程，结果都失败了。原因竟是我使用的element使用的是新版的，而新版的elem在模态框组件的展示时使用了<teleport to="body"><div></div></teleport>，导致querySelector获取dom操作失败。所以，改用document操作即可从全局获取到dom元素。
dom结构如图：（被传送到<body>下）
解决方案：
template代码：
<el-select ref="dom" value="fri">
<el-option v-for="(item,index) in arr" :key="index"
:value="item.type" :label="item.name"></el-option>
</el-select>
js代码：
mounted(){
// vue3中方式
let dom = document.querySelectorAll(".el-select-dropdown")[0].querySelector('.el-scrollbar__wrap');
dom.addEventListener('mousewheel', function () {
if(this.scrollTop + this.clientHeight>=this.scrollHeight){
console.log("chu di jia zai!")
}
})
}
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)