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

雨点打透心脏的1/2处 2022-09-05 01:45 158阅读 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
                    }               
                })
            },