vue.js el-table虚拟滚动效果怎么实现

今天小编给大家分享一下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虚拟滚动效果怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。