2、最终效果(基于element-plus 的 el-table组件)
3、TTable或TSelectTable组件使用(只需要在标签中设置useVirtual即可)
4、源码(可以提取当做hooks方式来使用–具体看组件源码)
let state = reactive({
tableData: props.table.data
})
const actualHeightContainerEl = ref<HTMLElement | any>(null)
const translateContainerEl = ref<HTMLElement | any>(null)
const scrollContainerEl = ref<HTMLElement | any>(null)
const saveDATA: Ref<any[]> = ref([])
const RenderedItemsCache: any = {}
watch(
() => props.table.data,
val => {
if (props.useVirtual) {
saveDATA.value = val
updateRenderData(0)
} else {
state.tableData = val
}
},
{ deep: true }
)
onMounted(() => {
if (props.useVirtual) {
saveDATA.value = props.table.data
actualHeightContainerEl.value = document.querySelector(
".t_table_use_virtual .el-scrollbar__view"
)
translateContainerEl.value = document.querySelector(".t_table_use_virtual .el-table__body")
scrollContainerEl.value = document.querySelector(".t_table_use_virtual .el-scrollbar__wrap")
scrollContainerEl.value?.addEventListener("scroll", handleScroll)
}
})
const updateRenderData = (scrollTop: number) => {
let startIndex = 0
let offsetHeight = 0
for (let i = 0; i < saveDATA.value.length; i++) {
offsetHeight += getItemHeightFromCache(i)
if (offsetHeight >= scrollTop) {
startIndex = i
break
}
}
state.tableData = saveDATA.value.slice(startIndex, startIndex + props.virtualShowSize)
updateRenderedItemCache(startIndex)
updateOffset(offsetHeight - getItemHeightFromCache(startIndex))
}
const handleScroll = (e: any) => {
updateRenderData(e.target.scrollTop)
}
onBeforeUnmount(() => {
if (props.useVirtual) {
scrollContainerEl.value?.removeEventListener("scroll", handleScroll)
}
})
const getItemHeightFromCache = (index: number | string) => {
const val = RenderedItemsCache[index]
return val === void 0 ? 50 : val
}
const updateActualHeight = () => {
let actualHeight = 0
saveDATA.value.forEach((_, i) => {
actualHeight += getItemHeightFromCache(i)
})
actualHeightContainerEl.value!.style.height = actualHeight + "px"
}
const updateOffset = (offset: number) => {
if (translateContainerEl.value && translateContainerEl.value.style) {
translateContainerEl.value!.style.transform = `translateY(${offset}px)`
}
}
const updateRenderedItemCache = (index: number) => {
const shouldUpdate = Object.keys(RenderedItemsCache).length < saveDATA.value.length
if (!shouldUpdate) return
nextTick(() => {
const Items: HTMLElement[] = Array.from(
document.querySelectorAll(".t_table_use_virtual .el-table__row")
)
Items.forEach(el => {
if (!RenderedItemsCache[index]) {
RenderedItemsCache[index] = el.offsetHeight
}
index++
})
updateActualHeight()
})
}
组件地址
gitHub组件地址
gitee码云组件地址
相关文章
基于ElementUi再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档