vue项目中element表格分页里自定义全部后用懒加载方式获取数据

最新推荐文章于 2024-10-16 10:27:47 发布

祥云飘绿

最新推荐文章于 2024-10-16 10:27:47 发布

阅读量1.6k

点赞数 2

分类专栏： vue中element表格分页数据懒加载文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_48790829/article/details/107960271

版权

vue中element表格分页数据懒加载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

1、element表格上加上ref属性

<el-table  :data="tableData" ref="multipleTable"></table>

2、element分页里自定义‘全部’，主要是通过设置layout，在layout里面加上slot可以实现自定义

<el-pagination
   @current-change="currentChange"
    :current-page="page.pageNum"
    :page-size="page.pageSize"
    :layout="page.layout"
    :total="page.total"
  >
    <el-select
      class="pageSelectContainer"
      v-model="curElPage"
      @change="changeSizes"
      placeholder="请选择"
    >
      <el-option
        v-for="item in optionsPage"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </el-pagination>

optionsPage: [
    {
        label: "10条/页",
        value: 10,
      },
      {
        label: "20条/页",
        value: 20,
      },
      {
        label: "30条/页",
        value: 30,
      },
      {
        label: "全部",
        value: 0,
      },
    ],
    curElPage: 20, //默认每页显示20条
    allNum: 0,
    laypages: 0,
    domTab: null,
    page: {
      total: 0,
      pageNum: 1,
      pageSize: 20,
      // layout: "total, sizes, prev, pager, next,jumper"
      layout: "total, slot, prev, pager, next,jumper",  // 加上slot自定义
    },
    arrTab: [],

//改变每页显示多少条
    changeSizes(val) {
      this.curElPage = val;
      this.page.pageNum = 1;
      if (val == 0) {
        this.page.layout = "total, slot";
      } else {
        this.page.layout = "total, slot, prev, pager, next,jumper";
      }
      this.sizeChange(val);
    },
    sizeChange(val) {
      var num = 0;
      if (val == 0) {
        //选择全部的时候先获取40条的
        num = 40;
        this.allNum = num;
      } else {
        num = val;
      }
      this.page.pageSize = num;
      this.getList();
    },
    // 翻页
    currentChange(val) {
      this.page.pageNum = val;
      this.getList();
    },

3、获取列表时监听element表格实现懒加载，注意removeEventListener清除下监听滚动并且不能使用匿名函数(这里写的是listenerScroll())，不然清不掉

getList(){
	let params = {
	   offset: (this.page.pageNum - 1) * this.page.pageSize,
	   limit: this.page.pageSize,
	  }
  	this.$store.dispatch("queryListCommon", params).then((res) => {
	  	this.page.total = res.data.data.count;
         if (this.allNum != 0) {
           this.laypages = res.data.data.count / this.allNum;
         }
         this.tableData = res.data.data.list;
         this.$nextTick(() => {
            if (this.curElPage == 0) {
              if (this.arrTab && this.arrTab.length != 0) {
              // 拼接数据
                let arr = [...this.arrTab, ...this.tableData];
                this.tableData = arr;
              }
              // 找到表格的滚动条
              this.domTab = this.$refs.multipleTable.bodyWrapper;
              this.domTab.addEventListener("scroll", this.listenerScroll, true);
              // 清除下监听滚动，不然切换别的后再次切换到全部会出问题
              this.domTab.removeEventListener(
                "scroll",
                this.listenerScroll,
                false
              ); 
            } else {
              this.arrTab = [];
            }
          });
  	})
},
listenerScroll() {
      if (this.page.pageNum < this.laypages && this.curElPage == 0) {
        var seeHeight = this.domTab.clientHeight; //可见区域高度
        var nrHeight = this.domTab.scrollHeight; //内容区高度
        var scrollHieght = this.domTab.scrollTop;
        if (nrHeight - seeHeight === scrollHieght) {
          this.arrTab = [...this.tableData];
          this.page.pageNum = this.page.pageNum + 1;
          this.getList();
        }
      }
    },