vue3下使用elementplus的el-scrollbar美化滚动条及触底加载
el-scrollbar有一个触底加载的坑点,就是加载后内容高度增加了,但是滚动条位置没有跟着变化,所以需要用手动触发官方写的setScrollTop方法进行重置,就可以了。
·
<el-scrollbar>有一个触底加载的坑点,就是加载后内容高度增加了,但是滚动条位置没有跟着变化,所以需要用手动触发官方写的setScrollTop方法进行重置,就可以了。
这里我封装成了组件vTable.vue,完整代码如下:
<!-- 无限滚动加载 -->
<template>
<div class="infinite-scroll">
<el-scrollbar ref="scrollbarRef" @scroll="onScroll">
<slot></slot>
</el-scrollbar>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, nextTick, defineEmits } from 'vue'
const emits = defineEmits(["loadData"])
const props = defineProps({
loading: {
type: Boolean
},
pageNum: { // 判断是否是第一页,如果是第一页则scroll重置到顶部
}
})
const scrollbarRef = ref()
const state = reactive({
loading: false,
_scrollTop: 0, // 记录数据加载前滚动条的位置,用来手动定位scrollbar
})
watch(() => props.pageNum, () => {
if (props.pageNum == 1) {
state._scrollTop = 0
scrollbarRef.value.setScrollTop(state._scrollTop)
}
})
watch(() => props.loading, () => {
scrollbarRef.value.setScrollTop(state._scrollTop)
nextTick(() => {
state.loading = props.loading
})
})
const onScroll = (options: any) => {
if (state.loading === true) {
return
}
// console.log(123, options, scrollbarRef.value.wrapRef.scrollHeight)
let wrapRef = scrollbarRef.value.wrapRef
scrollbarRef.value.moveY = wrapRef.scrollTop * 100 / wrapRef.clientHeight
scrollbarRef.value.moveX = wrapRef.scrollLeft * 100 / wrapRef.clientWidth
let poor = wrapRef.scrollHeight - wrapRef.clientHeight
// 判断滚动到底部
if (options.scrollTop + 2 >= poor) {
state._scrollTop = options.scrollTop
emits("loadData", true)
}
}
</script>
<style lang="scss" scoped>
.infinite-scroll {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
}
</style>
然后在其他文件内使用:
<template>
<vTable :loading="state.tableLoading" :pageNum="state.pageNum" @loadData="loadData">
<el-table :data="state.tableData" style="width: 100%">
<el-table-column prop="" label="项目名称">
<template #default="scope">
{{ scope.row.name }}
</template>
</el-table-column>
</el-table>
</vTable>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, onBeforeUnmount, watch, defineComponent, nextTick } from 'vue'
import vTable from "@/components/vTable.vue"
const state = reactive({
tableData: [] as any,
total: 0,
tableLoading: false,
pageNum: 1,
pageSize: 10,
})
onMounted(() => {
init()
})
const init = () => {
// 获取表格数据
getTableData()
}
// 获取表格数据
const getTableData = () => {
state.tableLoading = true
API接口({
pageNum: state.pageNum,
pageSize: state.pageSize
})
.then((res: any) => {
let data = res.data
state.tableData = data
state.total = data.total
nextTick(() => {
state.tableLoading = false
})
}).catch((err: any) => {
state.tableLoading = false
})
}
// 滚动加载表格数据
const loadData = () => {
if (state.total <= state.tableData.length) {
return
}
state.tableLoading = true
state.pageNum++
API接口({
pageNum: state.pageNum,
pageSize: state.pageSize
})
.then((res: any) => {
let data = res.data
state.tableData.push(...data)
nextTick(() => {
state.tableLoading = false
})
}).catch((err: any) => {
state.tableLoading = false
})
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)