今天小编给大家分享一下vue.js el-table虚拟滚动效果怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
基于Element-UI的Table 组件开发的虚拟滚动组件，支持动态高度，解决数据量大时滚动卡顿的问题
计算
安全
数据库
网络和加速
企业服务
<template>
<div
ref="listWrap"
@scroll="scrollListener"
>
<div ref="list">
<el-table
@select="select"
@select-all="selectAll"
:data="showList"
ref="scrollTable"
>
<slot></slot>
</el-table>
</div>
</div>
</template>
<script lang="ts">
import { ref, onMounted, computed, watch, defineComponent, nextTick } from 'vue'
interface IProps {
start: number
end: number
height: number
itemHeight: number
rowKey: string
// eslint-disable-next-line @typescript-eslint/no-explicit-any
initList: any[]
}
export default defineComponent({
name: 'Vue3VitualTable',
props: ['start', 'end', 'height', 'itemHeight', 'initList', 'rowKey'],
emits: ['handleSelect'],
setup(props: IProps, { emit }) {
// 表格
const listWrap = ref()
const list = ref()
const scrollTable = ref()
const start = ref(props.start)
const end = ref(props.end)
const isAllSelected = ref(false)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const selections = ref([] as any[])
// 可视区列表
const showList = computed(() => {
return props.initList.slice(start.value, end.value)
})
// 数据长度
const length = computed(() => {
return props.initList.length
})
// 滚动
const scrollListener = () => {
// 获取滚动高度
const scrollTop = listWrap.value.scrollTop
// 开始的数组索引
start.value = Math.floor(scrollTop / props.itemHeight)
// 结束索引
end.value = start.value + 10
list.value.style.transform = `translateY(${start.value * 65}px)` // 对列表项y轴偏移
nextTick(() => {
selections.value.forEach((ele) => {
scrollTable.value.toggleRowSelection(ele, true)
})
})
}
watch(length, (val) => {
if (val > 10) {
listWrap.value.style.height = props.itemHeight * 10 + 'px'
} else {
listWrap.value.style.height = props.itemHeight * val + 57 + 'px'
}
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleSelect = (val: any) => {
if (!isAllSelected.value) {
isAllSelected.value = scrollTable.value.store.states.isAllSelected.value
}
console.log('store.states.isAllSelected', scrollTable.value.store.states.isAllSelected.value)
emit('handleSelect', val)
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const select = (val: any) => {
if (val.length < props.initList.length) {
isAllSelected.value = false
} else {
isAllSelected.value = true
}
selections.value = val
emit('handleSelect', selections.value)
console.log('select', val)
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const selectAll = (val: any) => {
if (val.length) {
selections.value = props.initList
isAllSelected.value = true
} else {
selections.value = []
isAllSelected.value = false
}
emit('handleSelect', selections.value)
console.log('selectAll', val)
}
onMounted(() => {
console.log('onMounted')
})
return {
listWrap,
list,
scrollTable,
scrollListener,
showList,
length,
handleSelect,
selections,
select,
selectAll,
}
},
})
</script>
以上就是“vue.js el-table虚拟滚动效果怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
