vue-virtual-scroller+eltable实现虚拟表格

要实现虚拟表格，需要结合vue-virtual-scroller和eltable的功能。以下是简单的实现步骤：

1. 安装vue-virtual-scroller和element-ui

npm install vue-virtual-scroller element-ui

2. 在Vue组件中导入和注册vue-virtual-scroller和eltable组件

import { VirtualScroller } from 'vue-virtual-scroller'
import { Table, TableColumn } from 'element-ui'

export default {
  components: {
    VirtualScroller,
    Table,
    TableColumn
  },
  // ...
}

3. 在template中使用vue-virtual-scroller和eltable组件

<template>
  <virtual-scroller :items="items" :item-size="50" class="table-virtual-scroller">
    <el-table :data="items" class="table-body" :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </virtual-scroller>
</template>

4. 在script中设置数据源和样式

export default {
  data() {
    return {
      items: [] // 设置数据源
    }
  },
  mounted() {
    // 获取数据并更新items
    this.items = getData()

    // 设置虚拟列表容器的高度
    const windowHeight = window.innerHeight
    const tableHeaderHeight = 40 // 表头高度
    const tableRowHeight = 50 // 行高
    const tableBodyHeight = this.items.length * tableRowHeight // 表格体高度
    const tableVirtualScrollerHeight = windowHeight - tableHeaderHeight // 表格虚拟容器高度
    document.querySelector('.table-virtual-scroller').style.height = tableVirtualScrollerHeight + 'px'

    // 设置表格体高度
    document.querySelector('.table-body__wrapper').style.height = tableBodyHeight + 'px'
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      // 自定义行样式
      return rowIndex % 2 === 0 ? 'table-row-even' : 'table-row-odd'
    }
  }
}

5. 样式设置

/* 虚拟列表容器 */
.table-virtual-scroller {
  overflow-y: auto;
  position: relative;
}

/* 表格体 */
.table-body__wrapper {
  overflow: hidden;
}

/* 奇数行样式 */
.table-row-odd {
  background-color: #f9f9f9;
}

/* 偶数行样式 */
.table-row-even {
  background-color: #e6f7ff;
}

以上是一个简单的虚拟表格实现方法，您可以根据自己的需求进行样式、数据处理等方面的修改。