elementui的el-select加载分页

最新推荐文章于 2024-07-19 16:39:13 发布

资深Bug开发大师

最新推荐文章于 2024-07-19 16:39:13 发布

阅读量435

点赞数 2

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/m0_65351601/article/details/139270582

版权

elementui的el-select数据多的时候添加分页

方式一（添加分页组件）

 <el-select size="small" style="width: 100%" v-model="formInline.companyId" filterable clearable placeholder="请选择">
            <el-option v-for="item in companyAll" :key="item.value" :label="item.company" :value="item.companyId"> </el-option>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="linepage.page"
              :page-size="linepage.size"
              layout="total, prev, pager, next"
              :total="linepage.total"
            >
        </el-pagination>
   </el-select>

   linepage: {
        page: 1,
        size: 10,
        total: 10, 
   }

  handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.linepage.size = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.linepage.page = val
      this.getselect()  //调用接口
    },

方式二（配合自定义指令实现）

新建全局js文件（scroll.js）

 
import Vue from 'vue'
Vue.directive('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()
            }
        })
    }
})

main.js中引入

import './utils/scroll.js'

  <el-select  size="small"  v-model="formInline.userNo"  clearable  filterable v-loadmore="loadmore"    placeholder="请选择" >
        <el-option  v-for="(item, index) in seleArr"  :key="index" :label="item.userNo"  :value="item.userId"  >
 				</el-option>
  </el-select>

 userList: {
    currentPage: 1,
    pageSize: 10,
    pageCount: 0,
 },
 seleArr: [],

//获取select数据
  getUserlist() {
      this.$api.post(this.$urls.a.list, this.userList).then((res) => {
          if (res.status == 0) {
            this.seleArr = this.seleArr.concat(res.data.list); 
          }
        });
    },

 // 滚轮分页
 loadmore() { 
      if (this.userList.currentPage * this.userList.pageSize >= this.userList.pageCount) return;
      this.userList.currentPage++;
      this.getUserlist();
   },