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再次封装基础组件文档

相关推荐
大霞上仙44 分钟前
element ui table 每行不同状态
vue.js·ui·elementui
lv程序媛1 小时前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
蒟蒻的贤1 小时前
vue学习11.21
javascript·vue.js·学习
麻辣_水煮鱼3 小时前
vue数据变化但页面不变
前端·javascript·vue.js
计算机毕设孵化场5 小时前
计算机毕设-基于springboot的多彩吉安红色旅游网站的设计与实现(附源码+lw+ppt+开题报告)
vue.js·spring boot·后端·计算机外设·课程设计·计算机毕设论文·多彩吉安红色旅游网站
小王码农记6 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
战神刘玉栋6 小时前
《SpringBoot、Vue 组装exe与套壳保姆级教学》
vue.js·spring boot·后端
乐闻x6 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
理想不理想v6 小时前
【经典】webpack和vite的区别?
java·前端·javascript·vue.js·面试
xChive8 小时前
优化表单交互:在 el-select 组件中嵌入表格显示选项
前端·vue.js·交互·element-plus