vue3 + element-plus 设置表格自动滚动
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
el-table 中设置 ref,用来获取元素,必须设置高度才可以滚动,鼠标放上停止自动滚动,可手动滚动,鼠标离开自动滚动
<el-table
ref="myTable"
height="500"
@mouseover.native="clearScroll"
@mouseleave.native="createScroll"
></el-table>
import { ref, onMounted, onUnmounted } from 'vue'
let timer = null
let myTable = ref(null)
const clearScroll = () => {
clearInterval(timer)
timer = null
}
const createScroll = () => {
clearScroll()
// 拿到 table
const table = myTable.value.layout.table.refs
// 拿到可以滚动的元素
const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
timer = setInterval(() => {
tableWrapper.scrollTop += 1
// 判断是否滚动到底部,如果到底部了置为0(可视高度+距离顶部=整个高度)
if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
tableWrapper.scrollTop = 0
}
}, 100)
}
onMounted(() => {
createScroll()
})
onUnmounted(() => {
clearScroll()
})




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:19 天前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
更多推荐
所有评论(0)