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

相关推荐
清风絮柳6 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维6 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
桂月二二10 小时前
Vue3状态管理深度解析:Pinia架构设计与性能优化实践
vue.js
_未知_开摆12 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
喝拿铁写前端12 小时前
不同命名风格在 Vue 中后台项目中的使用分析
javascript·vue.js
sen_shan12 小时前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
lvbb6613 小时前
框架修改思路
前端·javascript·vue.js
qq_4560016513 小时前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
工业互联网专业13 小时前
基于springboot+vue的动漫交流与推荐平台
java·vue.js·spring boot·毕业设计·源码·课程设计·动漫交流与推荐平台