第二种方法:下拉加载更多 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('scroll...
import Vue from 'vue' let selectLoadMore = Vue.directive('selectLoadMore', { bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function () { const ...
},mounted() {// 获取dom节点constdomElementNode =document.querySelector('.more-next-box .el-select-dropdown__wrap')// 注册下拉滚动事件domElementNode.addEventListener('scroll',()=>{constisBottom = domElementNode.scrollHeight- domElementNode.scrollTop<= domElementNode.clientHeightif(isBottom) {c...
但是在编辑记录时,编辑界面也为select下拉框赋值了,却没有显示数据。 先放一个select多选下拉框编辑时正确的加载数据的显示效果图: 下拉框代码如下: <el-form-item prop="czfaIds" label="处置方案"> <el-select v-model="form.czfaIds" multiple style="width:80%;" placeholder="请选择" clearable :disabl...
当下拉框要展示大量数据内容时,并且下拉框不展示分页,那就不能手动点击分页去获取数据,那就只能利用监听滚动事件来实现了。 1. src下新建一个文件夹,创建一个指令 2. 在m...
1、首先给 el-select 绑定一个事件,这个事件 element 是不支持的,所以要自己定义一个属性: directives: { 'el-select-loadmore': { inserted(el, binding) { const SELECTWRAP_DOM = el.querySelector( '.el-select-dropdown .el-select-dropdown__wrap' ...
以下以element-ui中的select为例: 在main.js同级别文件中添加directives.js: // directives.jsimportVuefrom'vue'Vue.directive('loadmore', { bind (el, binding) {// 获取element-ui定义好的scroll盒子constSELECTWRAP_DOM= el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTWRAP_...
在项目开发过程中,总会遇到这样或者那样的问题,这次,用element-ui组件库的select,但是这个组件不支持分页加载更多,如果一次性把所有的数据都返回给前端,那还需要后端再加个接口。是不是有其他方式可以扩展下select? 在Vue文档中,找到了实现方式,那就是“注册自定义指令” ...
「v-el-select-loadmore」为自定义指令封装的数据加载指令,是为了解决和优化elementUI下拉选择器加载数据过多出现卡顿问题的。 「filter-method」是下拉选择器的一个自定义属性,可以监听输入的变量,从而依据变量来实现数据的动态获取; // 自定义指令directives: {"el-select-loadmore":(el, binding) =>{// 获取el...
简介: element-ui中Select 选择器异步加载下一页 场景 当我们使用 Select 选择器存放大量数据的时候。 会发现存在这么2个问题。 1.接口响应时间较长。(因为数据量较多,一次查询的所有)甚至有可能超时。 2.前端下拉框滑动卡顿。 这个时候们如何解决上面面临的问题呢? 有的小伙伴可能会说: 1.分页加载。确实是可以...