Antd vue实现虚拟滚动

使用了ant design vue 中的 a-table 组件，不使用分页，当表格数据过多时导致页面卡顿，此时可以使用虚拟滚动，减少dom节点，提高性能
实现方式和elemnetUI的el-table方法类似，主要是减少dom节点，每次只显示可视区的内容，滚动的时候，通过改变dom节点的内容达到页面数据的更新的效果。
效果如下：

1 页面结构

<template>
  <div>
    <div>
      <a-table
        ref="tableRef"
        style="width:260px"
        border
        :scroll="{x:true,y:418}"
        :data-source="sliceTable"
        :columns='columns'
        :rowKey="row => row.id"
      >
      </a-table>
    </div>
  </div>
</template>

2.定义变量

data(){
    
    
    return{
    
    
      // 表格所有数据
      tableData: [],
      // 开始索引
      startIndex: 0,
      // 选中的数据
      selectedRows: [],
      // 空元素，用于撑开table的高度
      vEle: undefined,
      // 是否全选
      isSelectedAll: false,
      columns:[
        {
    
    
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          width: 30,
        },
        {
    
    
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          width: 30,
        },
        {
    
    
          title: '住址',
          dataIndex: 'address',
          key: 'address',
          width: 30,
        },
      ]
    }
  },

3.定义方法

  // 计算属性
  computed: {
    
    
    // 这个是截取表格中的部分数据，放到了 table 组件中来显示
    sliceTable() {
    
    
      return this.tableData.slice(this.startIndex, this.startIndex + 9);
    },
  },

 created() {
    
    
    // 创建一个空元素，这个空元素用来撑开 table 的高度，模拟所有数据的高度
    this.vEle = document.createElement("div");
    this.loadData();
  },

mounted() {
    
    
  // 绑定滚动事件
  this.$refs.tableRef.$el
    .querySelector(".ant-table-body")
    .addEventListener("scroll", this.tableScroll, {
    
    
      passive: true
    });
},

 methods: {
    
    
    // 加载数据
    loadData() {
    
    
      let start_i = this.tableData.length;
      for (let i = start_i; i < start_i + 20; i++) {
    
    
        this.tableData.push({
    
    
          id: i,
          name: "zhangsan" + i,
          age: 12,
          address: "china"
        });
      }
      this.$nextTick(() => {
    
    
        // 设置成绝对定位，这个元素需要我们去控制滚动
        this.$refs.tableRef.$el.querySelector(".ant-table-tbody").style.position = "absolute";
        // 计算表格所有数据所占内容的高度
        this.vEle.style.height = this.tableData.length * 48 + "px";
        // 把这个节点加到表格中去，用它来撑开表格的高度
        this.$refs.tableRef.$el.querySelector(".ant-table-body").appendChild(this.vEle);
      });
    },

    /**
     * @description: table 滚动事件
     * @param {*}
     * @return {*}
     */
    tableScroll() {
    
    
      let bodyWrapperEle = this.$refs.tableRef.$el.querySelector(".ant-table-body");
      // 滚动的高度
      let scrollTop = bodyWrapperEle.scrollTop;
      // 下一次开始的索引
      this.startIndex = Math.floor(scrollTop / 48);
      // 滚动操作
      bodyWrapperEle.querySelector(".ant-table-tbody").style.transform = `translateY(${
      
      this.startIndex * 48}px)`;


      // 滚动到底，加载新数据
      if (bodyWrapperEle.scrollHeight <= scrollTop + bodyWrapperEle.clientHeight) {
    
    
        if (this.tableData.length == 100) {
    
    
          this.$message.warning("没有更多了");
          return;
        }
        this.loadData();
      }
    }
  }