網站首頁 編程語言 正文
效果圖
- 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
相關推薦
- 2022-06-13 C語言結構體超詳細講解_C 語言
- 2023-01-11 解讀時間序列分析之ADF檢驗_python
- 2022-09-08 Pytorch中transforms.Resize()的簡單使用_python
- 2024-03-04 echarts 柱狀圖,單獨一根柱子根據條件改變顏色
- 2022-05-22 C#中值類型和引用類型的區別_C#教程
- 2022-05-25 @Service未注入、 @Autowired未自動注入
- 2022-09-17 ASP.NET?Core實現AES-GCM加密算法_實用技巧
- 2022-03-30 python實現記事本功能_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支