快捷導(dǎo)航

vue.js?el-table虛擬滾動(dòng)完整實(shí)例代碼

更新時(shí)間：2022年12月29日 11:28:07 作者：CryptoCode

這篇文章主要給大家介紹了關(guān)于el-table虛擬滾動(dòng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

基于Element-UI的Table 組件開發(fā)的虛擬滾動(dòng)組件，支持動(dòng)態(tài)高度，解決數(shù)據(jù)量大時(shí)滾動(dòng)卡頓的問(wèn)題

實(shí)例代碼

<template>
  <div
    ref="listWrap"
    style="height: 400px; overflow-y: scroll; margin-top: 20px; padding: 10px"
    @scroll="scrollListener"
  >
    <div ref="list">
      <el-table
        @select="select"
        @select-all="selectAll"
        style="margin-top: 10px"
        :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[])

    // 可視區(qū)列表
    const showList = computed(() => {
      return props.initList.slice(start.value, end.value)
    })

    // 數(shù)據(jù)長(zhǎng)度
    const length = computed(() => {
      return props.initList.length
    })

    // 滾動(dòng)
    const scrollListener = () => {
      // 獲取滾動(dòng)高度
      const scrollTop = listWrap.value.scrollTop
      // 開始的數(shù)組索引
      start.value = Math.floor(scrollTop / props.itemHeight)
      // 結(jié)束索引
      end.value = start.value + 10
      list.value.style.transform = `translateY(${start.value * 65}px)` // 對(duì)列表項(xiàng)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>