1、首先给 el-select 绑定一个事件,这个事件 element 是不支持的,所以要自己定义一个属性: directives: { 'el-select-loadmore': { inserted(el, binding) { const SELECTWRAP_DOM = el.querySelector( '.el-select-dropdown .el-select-dropdown__wrap' ); SELECTWRAP_DOM.addEventListener('scroll', fun...
importVuefrom"vue";Vue.directive("loadmore",{bind(el,binding){// 获取element-ui定义好的scroll盒子constSELECTWRAP_DOM=el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");SELECTWRAP_DOM.addEventListener("scroll",function(){constCONDITION=this.scrollHeight-this.scrollTop<=this.client...
当下拉框要展示大量数据内容时,并且下拉框不展示分页,那就不能手动点击分页去获取数据,那就只能利用监听滚动事件来实现了。 1. src下新建一个文件夹,创建一个指令 2. 在m...
因此,解决问题的方式就是,如何降低el-select的可选项 leaderOptions的数量。 两种解决思路 我们认为有两种解决思路: 前后端配合 这种方式的优点是,思路清晰简单,修改后台接口的返回数据量,每次查询只返回100条数据,毕竟从使用上来说,不会真的有人一直下拉来选择。 这种方式的缺点是,出现问题的是前端,却需要后端来解...
第二种方法:下拉加载更多 1.写一个指令 /** * select 下拉框 底部触发指令*/Vue.directive('selectLoadMore',{ bind (el, binding) {//获取element-ui定义好的scroll盒子const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') ...
1 ) 分段加载:也不加载下拉项,通过点击下拉框的时候,再去加载,此时的选项全部加载进来,该种情况只适用于缓加载情况,需要点击加载完后才能下拉选项,体验一般。 2 )提示:element-ui的select有一个fildter-method方法,我们可以通过这个方法来进行过滤下拉项 ...
1 ) 分段加载：也不加载下拉项，通过点击下拉框的时候，再去加载，此时的选项全部加载进来，该种情况只适⽤于缓加载情况，需要点击加载完后才能下拉选项，体验⼀般。2 ）提⽰：element-ui的select有⼀个filter-method⽅法，我们可以通过这个⽅法来进⾏过滤下拉项 假设我们有个下拉框是⽤来选择⽤户...
第⼆种⽅法：下拉加载更多 1.写⼀个指令 /** * select 下拉框底部触发指令 */ Vue.directive('selectLoadMore',{ bind (el, binding) { // 获取element-ui定义好的scroll盒⼦ const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTWRAP_DOM....
第二种方法:下拉加载更多 1.写一个指令 /** * select 下拉框 底部触发指令 */ Vue.directive('selectLoadMore',{ bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener...
1.elementUI 的select支持搜索,数据后端获取。现项目经理提需求,内容多时下拉框渲染慢,想把下拉框内容做成分页形式。后端已支持分页2.前端加上分页组件后,发现点下一页,可能触发了blur事件,select输入框输入的搜索内容清空,下拉框收起。问:1,能否对下拉框options做分页,点击下一页怎样规避blur事件而去调用接口,重新...