Vue和elementUI禁用el-pagination的指定分页按钮

最新推荐文章于 2024-12-08 18:22:16 发布

原创最新推荐文章于 2024-12-08 18:22:16 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

前端框架库专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在前端处理后端设定的最大分页深度限制，通过初始化时和换页时的逻辑判断，禁用超过限制的分页按钮，并给出警告提示。使用Vue.js实现，当分页大小变化或页码切换时，动态检查并禁用无效的分页项，确保前端与后端接口的配合顺畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

后端是Python，有最大分页深度限制(作为前端搞不明白为啥这样限制)，数据总量有几十亿条，分页大小10/20/50/100，但是也就是可能有九千万页数据，所以调后端接口获取最大分页深度size，然后超过这个size就禁止这个分页按钮，即：

添加不能点击的样式
添加点击无效的JS逻辑。

效果如下：
在这里插入图片描述

思路

1. 先想初始化的时候怎么实现

分页信息来自列表接口，也就是说首先要在页面初始化的时候比如Vue的mounted调接口初始化列表数据的时候做些什么。
在这里插入图片描述
根据观察，乍一看有几千万页，好像有几千万个分页按钮一样，但是实际上，因为有后面的三点按钮每次页面最多只有9个左右的数字分页按钮，所以我只需要获取到所有的数字按钮中的分页数，让它跟最大分页size做比较，如果大于最大可查询分页size就添加一个css 的 class

2. 换页的时候实现

因为当分页大小 size改变的时候，会将当前页重置为首页也就是第一页，而前端可分页大小默认限制在10、20、50、100，而又跟后端确认后台可配置的最大可查询分页深度的最小值为1000所以前端分页分页大小的改变不会超出，即不需要考虑它的逻辑。
那就只需要考虑当前页换页的时候的逻辑。换页的时候el-pagination的li的innerText会改变，所以需要先当成初始化判断一次即执行先想初始化的时候怎么实现，然后再根据要跳转的页码和当前的分页大小和最大可查询分页深度对比，然后给出提示即可。

代码实现

data(){
	return{
		page: 0,
		size: 10,
		total: 0,
	}
},
mounted(){
	this.initAjaxData();
},
methods: {
	async initAjaxData(){
		const res = await xxxx; // 后端接口
		if (resData.code === 0) {
        	this.total = resData.meta.pagination.total;
        	this.$nextTick(() => {
          		this.initElPageForbiddenBtn();
        	});
      	}
	},
	// 根据每次请求的结果和最大可查询size动态设置分页按钮是否可以点击 操作了DOM
    initElPageForbiddenBtn() {
      const elPagerBtn = document.querySelector('.el-pager');
      const numberNodes = Array.from(elPagerBtn.querySelectorAll('.number'));
      numberNodes.forEach((item) => {
        const currentData = item.innerText; // string
        if (+currentData > this.curMaxPageLimit / this.size) { // curMaxPageLimit 为后端返回的限制
          // eslint-disable-next-line no-param-reassign
          item.className = 'forbidden-click';
        }
      });
    },

    handleCurrentChange(fn, page) {
      this.initElPageForbiddenBtn();
      if ((page * this.size) > this.curMaxPageLimit) {
        this.$message.warning(`网页最大允许查询${this.curMaxPageLimit}条数据！`);
        return;
      }
      this.page = page;
      this[fn]();
    },
}

template

          <el-pagination
            background
            @size-change="(selfSize) => handleSizeChange('initOrgAssetFn', selfSize)"
            @current-change="(selfPage) => handleCurrentChange('initOrgAssetFn', selfPage)"
            :current-page="page"
            :page-sizes="pageSize"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

scss

::v-deep .el-pager {
  .forbidden-click{
     pointer-events: none!important;
     opacity: 0.6!important;
  }
}