select2滚动加载

不能重复初始化需要滚动加载的select2 当有滚动加载的时候 初始化 不能包括当前的滚动加载的元素

  $("select").not('#department').select2({    //当给所有select2 初始化的时候 不能包括当前的
            language:"zn-CN",
            placeholder:'请选择',
            allowClear: true,//可以清除选项

        });
 $('#department').select2({
            width:200,
            // placeholder: '请选择部门',
            language: "zh-CN",
            data:[{ id: employeeId, text: partmentName}],  //  默认值填写  value 是id  text:是名字 不能使用其他字段
            inputMessage:'信息科',
            ajax: {
                url: ,   //  请求后台借口地址
                dataType: 'json',
                delay: 500,
                data: function (params) {
                    return {
                        keyWord: params.term || '',    //搜索参数
                        page: params.page || 1,        //分页参数
                        rows: params.pagesize || 10,   //每次查询10条记录

                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    var d_l = data.list;
                    for (var i = 0, len = d_l.length; i < len; i++) {
                        d_l[i].id = d_l[i].bck01;   //bck01 后台传回来需要显示的id  根据自己需要写值
                    }
                    return {
                        results: d_l,
                        pagination: {
                            //more: (params.page) < data.paginator.totalPages
                            more: (params.page) < data.totalPage
                        }
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            templateResult: function (data) {
                if (data.loading) {
                    return data.text;
                } else {
                    return data.bck03;      //bck03 select2的value值   根据自己情况定义
                }
            },
            templateSelection: function (data) {
                return data.bck03||data.text;
            }
        });
取值
$('#home_bak05h').select2('data')[0]

后台传回额数据这些参数是必须的

      mv.setList(page.getList());
      mv.setTotal(page.getTotalNumber());
      mv.setRecordsFiltered(page.getTotalNumber());
      mv.setRecordsTotal(page.getTotalNumber());
      mv.setRecords(page.getTotalNumber());
      mv.setTotalPage(page.getTotalPage());
Element UI库中的Select组件提供了滚动加载的功能,可以在选项较多时使用,提高用户体验和性能。 实现滚动加载的方法是通过监听Select组件的滚动事件,在滚动到底部时触发加载更多的数据。具体实现步骤如下: 1. 在Select组件中添加一个slot插槽,用于渲染下拉选项列表。 2. 监听Select组件的滚动事件,在滚动到底部时触发加载更多的数据。 3. 在加载数据时,将新数据添加到原有的选项列表中。 4. 当所有数据加载完毕后,将滚动事件取消,以避免不必要的性能消耗。 以下是一个简单的示例代码,实现了Select组件的滚动加载功能: ``` <template> <el-select v-model="value" @scroll="handleScroll"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> <el-option v-if="loading" label="加载中..." disabled></el-option> </el-select> </template> <script> export default { data() { return { value: '', options: [], // 存储所有选项的列表 loading: false, // 是否正在加载数据 page: 1, // 当前加载数据的页码 pageSize: 10, // 每页显示的数据量 total: 0, // 数据总数 } }, mounted() { this.loadOptions() }, methods: { // 加载选项数据的方法 async loadOptions() { try { this.loading = true const res = await fetch(`/api/options?page=${this.page}&pageSize=${this.pageSize}`) const { data, total } = await res.json() this.options = [...this.options, ...data] this.total = total this.loading = false } catch (error) { console.error(error) this.loading = false } }, // 处理滚动事件的方法 handleScroll(event) { const elem = event.target if (elem.clientHeight + elem.scrollTop >= elem.scrollHeight && !this.loading && this.options.length < this.total) { this.page++ this.loadOptions() } }, } } </script> ``` 在上面的示例代码中,loadOptions方法用于加载选项数据,handleScroll方法用于处理滚动事件。在滚动到底部时,如果当前不在加载数据的状态,就会触发加载更多数据的操作。在加载数据时,通过计算当前数据总数和已加载数据的数量,判断是否需要继续加载数据。当所有数据加载完毕后,滚动事件就会被取消,避免不必要的性能消耗。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值