el-select 下拉框滚动分页带搜索demo

页面部分

<el-select

                            clearable

                             remote

                             v-model="p.orgId"

                             :remote-method="getOrgByName"

                             v-el-select-loadmore="selectLoadMoreSnInfo"

                              filterable>

                                <el-option v-for="item in orgIdList" :key="item.value" :label="item.label" :value="item.value" />

                            </el-select>

      // 创建自定义事件

         directives: {

            // 自定义下拉框下拉到底事件

            'el-select-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();

                }

                });

            }

            }

        },

data(){

 orgIdList:[],

                isShowLoadMore:true,

                v:{

                    pageNo: 1,      // 当前页

                    pageSize: 10,   // 页大小

                    orgName: '',        // 组织名称

                }

}

 created: function () {

            this.getOrgIdList();

        },

    getOrgByName(val){

                this.isShowLoadMore = true;

                this.orgIdList = [];

                this.v.pageNo = 1;

                this.v.orgName = val

                t.ajax('/***/getList', this.v ,function(res) {

                    res.data.forEach(item => {

                        this.orgIdList.push({

                            value:item.id,

                            label:item.orgName

                        })

                    })

                    if(res.pageCount <= this.v.pageNo){

                        this.isShowLoadMore = false;

                        return;

                    }

                }.bind(this), { msg: null });

            },

            selectLoadMoreSnInfo() {

                if (this.isShowLoadMore) {

                    this.isShowLoadMore = false;

                    this.v.pageNo++;

                    sa.ajax(

                        "/AfOrg/getList",

                        this.v,

                        function (res) {

                        res.data.forEach((item) => {

                            this.orgIdList.push({

                                value: item.id,

                                label: item.orgName,

                            });

                        });

                        if(res.pageCount <= this.v.pageNo){

                            this.isShowLoadMore = false;

                            return;

                        }

                        this.isShowLoadMore = true;

                        }.bind(this)

                    );

                }

            },

            getOrgIdList(){

                t.ajax('/***/getList',this.v, function(res) {

                    res.data.forEach(item => {

                        this.orgIdList.push({

                            value:item.id,

                            label:item.orgName

                        })

                    })

                }.bind(this), { msg: null });

            },

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值