Element ui el-table自适应高度+滚动懒加载

最新推荐文章于 2023-12-25 11:06:09 发布

夏末_阳光依然耀眼

最新推荐文章于 2023-12-25 11:06:09 发布

阅读量806

点赞数

分类专栏： js el-table vue 文章标签： vue.js

本文链接：https://blog.csdn.net/boyit0/article/details/119734696

版权

vue 同时被 3 个专栏收录

15 篇文章 2 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

el-table

1 篇文章 0 订阅

订阅专栏

<el-table :data="tableData" size="small" :height="Height" ref="table" >
          <el-table-column type="index" label="序号" :index='indexMethod'  align="center" width='50px'></el-table-column>
         <el-table-column prop="id" label="id" align="center" v-if="false"></el-table-column>
          <el-table-column prop="name" label="名称" align="center"></el-table-column>
          <el-table-column prop="nicheng" label="昵称" align="center"></el-table-column>
          <el-table-column prop="sum" label="票数" align="center"></el-table-column>
          <el-table-column prop="time" label="统计时间" align="center"></el-table-column>
          </el-table>

js方法：

currPageNo: 1, //当前页
pageSize:7, //每页显示条数
totalCount:10, //总条数
totalPageCount:2, //总页数
tableData:[],
Height:null,
dom:null,

mounted() {
		this.Height = window.innerHeight - this.$refs.table.$el.offsetTop - 40;
		setTimeout(() => {
		  this.showlist();
		}, 100);		
		// 获取需要绑定的table
		this.dom = this.$refs.table.bodyWrapper
		this.dom.addEventListener('scroll', () => {
			// 滚动距离
			let scrollTop = this.dom.scrollTop
			// 变量windowHeight是可视区的高度
			let windowHeight = this.dom.clientHeight || this.dom.clientHeight
			// 变量scrollHeight是滚动条的总高度
			let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
			if (scrollTop + windowHeight === scrollHeight) {
				// 获取到的不是全部数据 当滚动到底部 继续获取新的数据
				/*if (!this.tableData) this.getMoreLog()*/
				console.log('scrollTop', scrollTop + 'windowHeight', windowHeight + 'scrollHeight', scrollHeight)
				 if (this.currPageNo >= this.totalPageCount) {
				      //判断是否到达底部
					  Toast({message: '我~是有底线的！'}); 
				 }
				 if(this.currPageNo < this.totalPageCount){
					this.currPageNo++;
					let attribute={
					    currPageNo:this.currPageNo,
					    pageSize:this.pageSize,
					    id:this.id
					}
					API.List(attribute).then(res=>{
					    if(res.code=="200"){
							this.tableData = this.tableData.concat(res.data)					      
					    }else{
					        return false
					    }               
					}) 
				 }
			}
		})
	},

indexMethod(index) {
  return (this.currPageNo - 1) * this.pageSize + index + 1;
},
showlist(){ //获取列表
            let attribute={
                currPageNo:this.currPageNo,
                pageSize:this.pageSize,
                id:this.id
            }
            API.List(attribute).then(res=>{
                if(res.code=="200"){					
                    this.tableData=res.data
					this.totalPageCount=res.page.totalPageCount;
                }else{
                    return false
                }               
            })
        },