element表格滚动加载

最新推荐文章于 2025-04-19 10:20:42 发布

原创最新推荐文章于 2025-04-19 10:20:42 发布

· 812 阅读

2 ·

版权

文章标签：

#vue.js #javascript

本文介绍如何在Vue.js项目中使用Element UI库的表格组件实现滚动加载数据的功能，通过自定义指令和方法来优化用户体验。

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

template

<el-table
  :data="tableData"
   v-loadmore="getData"
   height="427"
   style="width: 100%;margin-top:32px"
 >
 </el-table>

自定义指令

directives: {
    loadmore: {
      // 指令的定义
      bind(el, binding, vnode) {
        const selectWrap = el.querySelector(".el-table__body-wrapper");
        selectWrap.addEventListener("scroll", function() {
          const sign = 100;
          const scrollDistance =
            this.scrollHeight - this.scrollTop - this.clientHeight;
          if (scrollDistance <= sign) {
            binding.value();
            vnode.context.getData();
          }
        });
      }
    }
  },

方法

getAttendanc() {
    axios({
      url: "xxx",
      method: "post",
      data: {
        pageNum: this.currentPage,
        pageSize: 10
      }
    }).then(res => {
      this.tableData.push(...res.data.data.list);
      this.totalPage = res.data.data.pages;
      this.flag = true;
    });
  },
 getData() {
 	//当前页小于总页数时请求接口
 	if (this.flag === true){
 		this.flag = false;
	 	if (this.currentPage < this.totalPage) {
	      this.currentPage++;
	      this.getAttendanc();
	    }
 	}
    
 },