日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

el-table滾動懶加載,顯示加載狀態

作者:ZionHH 更新時間: 2022-05-12 編程語言

效果圖

在這里插入圖片描述

  • 1.添加自定義指令
// main.js
Vue.directive('tableScroll', {
    bind (el, binding) {
    	// el-table 內容滾動區域
        const bodyWrap = el.querySelector('.el-table__body-wrapper')
        bodyWrap.addEventListener('scroll', function () {
            let sign = 0
            // 滾動到底部
            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
            if (scrollDistance <= sign) {
                binding.value()
            }
        })
    }
})
  • 2.在你的el-table上綁定事件

<el-table
	v-table-scroll="lazyLoad"
	ref="scrollTable"
	max-height="xxx" 
	...>
el-tbale>
  • 3.加載文字DOM節點
// 這里監聽獲取到數據渲染后,處理加載文字DOM節點
watch: {
	tableData: {
	    handler (val) {
	        if (val.length) {
	            this.$nextTick(() => {
	                let el = this.$refs.scrollTable.$el
	                const bodyWrap = el.querySelector('.el-table__body-wrapper')
	                // 我這里第一列固定,固定容器也要生成節點來對齊滾動容器
	                const fixedBodyWrap = el.querySelector('.el-table__fixed-body-wrapper')
	                let loadDiv = document.createElement('div')
	                let emptyDiv = document.createElement('div')
	                loadDiv.className = 'load-text'
	                emptyDiv.innerHTML = '.'
	                loadDiv.style.textAlign = 'center'
	                loadDiv.style.display = 'none'
	                emptyDiv.style.visibility = 'hidden'
	                const loadTextDom = el.querySelectorAll('.load-text')
	                // 未添加節點時添加
	                if (!loadTextDom.length) {
	                    loadDiv.innerHTML = this.page.totalPage > 1 ? '努力加載中(>ω<*)' : '人家是有底線的 (??ω??)'
	                    bodyWrap.appendChild(loadDiv)
	                    fixedBodyWrap.appendChild(emptyDiv)
	                }
	                // 已生成節點時處理
	                if (loadTextDom.length) {
	                    const loadText = el.querySelector('.load-text')
	                    loadText.style.display = 'none'
	                    loadText.innerHTML = this.page.totalPage > 1 ? '努力加載中(>ω<*)' : '人家是有底線的 (??ω??)'
	                }
	            })
	        }
	    },
	    deep: true
	}
}
  • 4.lazyload觸發處理
data () {
	// 分頁
	page: {
		current: 1,
		pageSize: 20,
		total: 0,
		totalPage: 0
	}
},
method: {
	lazyLoad () {
		let el = this.$refs.scrollTable.$el
		let loadDiv = el.querySelector('.load-text')
		// loadSign標記 防止重復加載
		if (this.loadSign) {
			loadDiv.style.display = 'block'
			this.page.current++
			// 大于總頁數時
			if (this.page.current > this.page.totalPage) {
				loadDiv.innerHTML = '人家是有底線的 (??ω??)'
				return
			}
			// 這里是接口函數
			this.getTableData()
		}
	},
	// 接口示例,這里以我這里接口返回的格式展示
	getTableData() {
		this.loadSign = false
		// API
		XXAPI().then(res => {
			this.loadSign = true
			if (res.data.code === 0) {
				let result = res.data.data
				this.tableData = this.tableData.concat(result.list)
                this.page.totalPage = Math.ceil(result.total / result.pageSize)
                ...
			} ...
		}).catch((() => {
			this.loadSign = true
		})
	}
}

原文鏈接:https://blog.csdn.net/z291493823/article/details/111312206

欄目分類
最近更新