Vue3 + element-plus el-table二次封装组件新增虚拟滚动功能

1、此功能已集成到TTable组件TSelectTable

2、最终效果(基于element-plus 的 el-table组件)

3、TTable或TSelectTable组件使用(只需要在标签中设置useVirtual即可)

4、源码(可以提取当做hooks方式来使用--具体看组件源码)

js 复制代码
// 初始化数据
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 => {
    // console.log(111, 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
    }
  }
  // 计算得出的渲染数据(props.virtualShowSize初始化显示条数)
  state.tableData = saveDATA.value.slice(startIndex, startIndex + props.virtualShowSize)
  // 缓存最新的列表项高度
  updateRenderedItemCache(startIndex)
  // 更新偏移值
  updateOffset(offsetHeight - getItemHeightFromCache(startIndex))
}
// 滚动事件
const handleScroll = (e: any) => {
  // 渲染正确的数据
  updateRenderData(e.target.scrollTop)
  // console.log("滚动事件---handleScroll")
}
// 移除滚动事件
onBeforeUnmount(() => {
  // console.log("移除滚动事件")
  if (props.useVirtual) {
    scrollContainerEl.value?.removeEventListener("scroll", handleScroll)
  }
})
// 获取缓存高度,无缓存,取配置项的 itemHeight(设置每行高度50px)
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再次封装基础组件文档

相关推荐
一个很帅的帅哥25 分钟前
Vue中的data为什么是函数?
前端·javascript·vue.js·data
小刘鸭地下城1 小时前
深入解析 Vue 的异步 DOM 更新机制:nextTick 的正确使用指南
vue.js
一个很帅的帅哥3 小时前
Vue keep-alive
前端·javascript·vue.js·keep-alive
一条有腹肌的咸鱼6 小时前
vue3+vite+element-plus封装npm插件遇到的问题,求大神搭救
vue.js
JamesGosling6666 小时前
详解 Vue 3.6 Vapor Mode:从原理到问题,看透 VDOM 逐步退场的底层逻辑
前端·vue.js
一个很帅的帅哥7 小时前
Vue中的hash模式和history模式
前端·vue.js·history模式·hash模式
华仔啊7 小时前
加班到凌晨,我用 Vue3 + ElementUI 写了个可编辑的表格组件
vue.js·element
小咕聊编程8 小时前
【含文档+PPT+源码】基于SpringBoot+Vue的停车场管理系统
vue.js·spring boot·后端·毕业设计·停车场
做运维的阿瑞14 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
武昌库里写JAVA14 小时前
Java设计模式之工厂模式
java·vue.js·spring boot·后端·sql