Vue2中使用自定義指令實現(xiàn)el-table虛擬列表的代碼示例

更新時間：2025年01月15日 09:29:48 作者：程序員張張

在實際開發(fā)中,我們可能會面臨其他需求,例如在 el-table 中無法使用分頁技術的情況下展示海量數(shù)據(jù),這種情況下,頁面可能會出現(xiàn)卡頓,嚴重時甚至可能引發(fā)瀏覽器崩潰,所以針對這個問題本文給大家介紹了vue2中使用自定義指令實現(xiàn)el-table虛擬列表,需要的朋友可以參考下

引言

上一篇文章我們講了虛擬列表的實現(xiàn)原理，以及在vue3中的使用實例，感興趣的友友們可以查看相關內容傳送門。然而，在實際開發(fā)中，我們可能會面臨其他需求，例如在 el-table 中無法使用分頁技術的情況下展示海量數(shù)據(jù)。這種情況下，頁面可能會出現(xiàn)卡頓，嚴重時甚至可能引發(fā)瀏覽器崩潰。針對這一問題，我們需要尋找其他的解決方案。

創(chuàng)建virtualTable組件

首先新建一個virtualTable.vue文件，代碼如下：

<template>
  <div style="width: 100%">
    <el-table v-virtual-list="virtual" width="100%" height="600" :data="tableData.slice(start, over)">
      <el-table-column align="center" prop="date" label="日期" :height="virtual.itemHeight" min-width="180"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名" :height="virtual.itemHeight" min-width="180"></el-table-column>
      <el-table-column align="center" prop="address" label="地址" :height="virtual.itemHeight" min-width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
let timeout = null
export default {
  name: 'virtualTable',
  data() {
    return {
      tableData: [],
      virtual: {
        itemHeight: 40, // 每一項高度
        scrollClass: '.el-table__body-wrapper', // 有滾動條元素
        scrollTop: 0, // 滾動條距離頂部距離
        tableHeight: 0 // 可視區(qū)高度
      }
    }
  },
  computed: {
    // 起始下標
    start() {
      return Math.max(Math.ceil(this.virtual.scrollTop / this.virtual.itemHeight - 5), 0)
    },
    // 結束下標
    over() {
      return Math.min(
        Math.ceil((this.virtual.scrollTop + this.virtual.tableHeight + 1) / this.virtual.itemHeight + 5),
        this.tableData.length
      )
    },
    // 為了保持列表高度完整且滾動條能正常滾
    paddingAttr() {
      let bottom = (this.tableData.length - this.over) * this.virtual.itemHeight
      let top = this.start * this.virtual.itemHeight
      return `${top}px 0 ${bottom}px 0`
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let _arr = []
      for (let i = 1; i <= 100000; i++) {
        _arr.push({
          date: '2016-05-02',
          name: '王小虎' + i,
          address: `上海市普陀區(qū)金沙江路 ${i} 弄`
        })
      }
      this.tableData = _arr
      timeout = setTimeout(() => {
        const target = document.querySelector(this.virtual.scrollClass)
        this.virtual.tableHeight = target.clientHeight ?? 0
        this.setPaddingAttr(target)
      })
    },
    // 更新padding屬性
    setPaddingAttr(target) {
      let _table = target.querySelector('table')
      _table.style.padding = this.paddingAttr
    }
  },
  beforeDestroy() {
    clearTimeout(timeout)
  }
}
</script>

<style scoped>
::v-deep th,
::v-deep td {
  height: 40px;
  line-height: 40px;
  padding: 0;
}
</style>

代碼介紹

這邊重點說一下里面的關鍵代碼，具體原理可以參考我上一篇文章傳送門

virtual對象

virtual對象虛擬列表相關的屬性，放在一個對象中方便管理，需要傳入到自定義指令中。

timeout = setTimeout(() => {})

為了解決組件初始化時nextTick中無法獲取到正確的clientHeight。

this.virtual.tableHeight = target.clientHeight ?? 0

組件初始化時獲取容器的可視區(qū)高度。

this.setPaddingAttr(target)

設置paddingAttr方法，重新計算padding，為了確保虛擬列表的渲染效果正確。

tips

當然這里我們可以將其封裝成一個公共的組件，如果有相同的需求直接使用當前組件。這里我就不去封裝了，感興趣的友友們可以去嘗試一下。

添加自定義指令

// 虛擬列表自定義指令
Vue.directive('virtual-list', {
  bind(el, bind, vNode) {
    const that = vNode.context
    let virtual = bind.value
    if (virtual) {
      let target = el.querySelector(virtual.scrollClass)
      target.addEventListener('scroll', () => {
        // 更新滾動條位置
        that.virtual.scrollTop = target.scrollTop
        // 重新計算padding
        that.setPaddingAttr(target)
      })
    }
  }
})