el-table虚拟列表

el-table是Element UI框架中的一个表格组件，而虚拟列表是el-table的一个特性，用于优化大数据量表格的性能。虚拟列表通过只渲染可见区域内的数据项，减少DOM元素的数量，从而提高表格的渲染速度和滚动的流畅度。

在el-table中启用虚拟列表需要设置`:virtual-scroll="true"`属性。虚拟列表的工作原理是根据可视区域的高度和每行的高度计算出可见的数据项范围，然后只渲染这个范围内的数据项。当用户滚动表格时，会动态地更新可见数据项的内容。

虚拟列表还可以通过设置`:item-size`属性来指定每行的高度，以便更精确地计算可见数据项的范围。同时，还可以使用`@scroll`事件来监听滚动事件，以便在需要时进行一些自定义操作。

需要注意的是，虚拟列表只适用于静态数据，即数据不会频繁地增删或变化。如果数据是动态的，建议使用分页加载或其他方式进行优化。

相关问题

el-table虚拟列表实现代码

以下是el-table虚拟列表的实现代码：

<template>
  <el-table
    ref="table"
    :data="tableData"
    :row-key="row => row.id"
    :height="tableHeight"
    :row-height="rowHeight"
    :header-row-height="headerRowHeight"
    :v-loading="loading"
    :default-sort="defaultSort"
    @sort-change="handleSortChange"
    @row-click="handleRowClick"
    @row-contextmenu="handleRowContextMenu"
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :label="column.label"
      :prop="column.prop"
      :min-width="column.minWidth"
      :resizable="column.resizable"
      :formatter="column.formatter"
      :sortable="column.sortable"
      :sort-method="column.sortMethod"
      :align="column.align"
      :header-align="column.headerAlign"
      :show-overflow-tooltip="column.showOverflowTooltip"
      :fixed="column.fixed"
    />
  </el-table>
</template>

<script>
import { debounce } from 'lodash'

export default {
  name: 'VirtualTable',
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      required: true
    },
    rowHeight: {
      type: Number,
      default: 40
    },
    headerRowHeight: {
      type: Number,
      default: 40
    },
    defaultSort: {
      type: Object
    },
    fetch: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      scrollTop: 0,
      startRow: 0,
      endRow: 0,
      visibleRowCount: 0,
      requestParams: {},
      sort: null
    }
  },
  computed: {
    tableHeight() {
      return this.height - this.headerRowHeight
    },
    visibleRowStartIndex() {
      return Math.floor(this.scrollTop / this.rowHeight)
    },
    visibleRowEndIndex() {
      return Math.floor((this.scrollTop + this.tableHeight) / this.rowHeight)
    },
    isAllDataLoaded() {
      return this.endRow === this.total - 1
    }
  },
  watch: {
    data() {
      this.loadData()
    }
  },
  mounted() {
    this.loadData()
    this.$refs.table.bodyWrapper.addEventListener('scroll', debounce(this.handleScroll, 50))
  },
  methods: {
    async loadData() {
      this.tableData = []
      this.startRow = 0
      this.endRow = 0
      this.visibleRowCount = 0
      if (this.data.length > 0) {
        await this.loadRows()
        this.$refs.table.doLayout()
      }
    },
    async loadRows() {
      this.requestParams = {
        start: this.startRow,
        end: this.endRow,
        sort: this.sort
      }
      const result = await this.fetch(this.requestParams)
      this.tableData = this.tableData.concat(result.data)
      this.startRow = this.endRow + 1
      this.endRow = this.startRow + result.data.length - 1
      this.visibleRowCount = this.tableData.length
    },
    async handleScroll() {
      const { scrollTop } = this.$refs.table.bodyWrapper
      const scrollDistance = Math.abs(scrollTop - this.scrollTop)
      if (scrollDistance > this.rowHeight) {
        this.scrollTop = scrollTop
        await this.updateVisibleRows()
      }
    },
    async updateVisibleRows() {
      let shouldLoadMore = false
      if (this.visibleRowCount === 0) {
        shouldLoadMore = true
      } else if (this.visibleRowStartIndex > this.endRow || this.visibleRowEndIndex < this.startRow) {
        shouldLoadMore = true
      }
      if (shouldLoadMore && !this.isAllDataLoaded) {
        await this.loadRows()
      }
    },
    async handleSortChange(sort) {
      this.sort = sort
      await this.loadData()
    },
    async handleRowClick(row, column, event) {
      this.$emit('row-click', row, column, event)
    },
    async handleRowContextMenu(row, column, event) {
      this.$emit('row-contextmenu', row, column, event)
    }
  }
}
</script>

该组件的实现主要是通过监听表格的滚动事件来动态加载数据，从而实现虚拟列表。同时，还有一些其他的功能，如排序、点击行、右键菜单等，都已经在代码中实现。需要注意的是，这里使用了 lodash 库中的 debounce 函数来控制滚动事件的触发频率。

el-table虚拟化

// 使用element-plus的虚拟表格化组件el-table-v2渲染数据和组件的方法
// 设置columns属性时，其中的宽度字段（width）必须设置值（只能是数字类型）且每一列都要设置
// el-table-v2在生产环境使用可能有风险，建议使用vxe-table
// 安装依赖：npm i -S vuedraggable@next