QAQ!~~

老项目翻新时发现一个下拉框数据非常多客户呢希望全部数据一起展示意思就是全部数据一起返回给前端用于展示。

但这会造成明显的卡顿。

~~明显的不合理!

QAQ!~~

1、在el-select下拉框中添加分页组件让用户点击下一页下一页

由于项目中有多个地方使用到

可能单个页面中会用到多次为了复用选择了自定义指令的方式去实现。

触底加载哪个元素滚动触底时加载

承装下拉框中所有元素的容器(.el-scrollbar__wrap)触底时触发方法做什么

触底时继续向后端发请求获取下一页的数据请求回来的数据合并给options

后端代码在这里GitHub

//el-selectp第二个select/pel-select

v-modelvalue

{axios.get(http://localhost:9999/getSelectOptions?pageIndex${pageData.pageIndex}pageSize${pageData.pageSize}).***n(res

(res.data.length

}})options.value.push(...newOptions)})

const

我们需要将其插入body元素中吗如果是单个页面中只出现一个那影响不大如果是多个我们要选中该元素时就很不方便了。

且我们这边使用的是自定义指令的方式指令在el-select元素上teleported为false不插入body时正好可以在自定义指令中使用el.querySelector(.el-scrollbar__wrap)获取滚动的元素。

自定义指令

src/directives/loadmore/index.js

import

插入body时需要以document.querySelector(.el-scrollbar__wrap)获取let

scrollWrap

el.querySelector(.el-scrollbar__wrap)//

handle

绑定监听滚动事件scrollWrap?.addEventListener(scroll,

handle)//

document.querySelector(.el-scrollbar__wrap)scrollWrap?.removeEventListener(scroll,

null}

{Object.keys(directives).forEach((key)

{app.directive(key,

app.use(directive);app.mount(#app);

下拉框触底加载自定义指令

//el-selectp第二个select/pel-select

v-modelvalue

{axios.get(http://localhost:9999/getSelectOptions?pageIndex${pageData.pageIndex}pageSize${pageData.pageSize}).***n(res

(res.data.length

}})options.value.push(...newOptions)})

const