ant-design-vue a-table 表格动态渲染

修改： a-table标签
:data-source="sliceTable"

修改：data
// 开始索引
startIndex: 0,
// 空元素，用于撑开table的高度
vEle: undefined,


修改：created
this.vEle = document.createElement("div");
this.vEle.className = 'blankDiv'; 


修改：mounted
var table =  document.querySelector("#dataTable > div > div > div > div > div.ant-table-scroll > div.ant-table-body")
var table_fixed = document.querySelector("#dataTable > div > div > div > div > div.ant-table-fixed-right > div.ant-table-body-outer > div")
table.addEventListener("scroll", this.tableScroll, {
   passive: true
}); 
if(table_fixed){
   table_fixed.addEventListener("scroll", this.tableScroll, {
   passive: true
   });  
}

添加方法：动态计算
tableScroll() {
    var table =  document.querySelector("#dataTable > div > div > div > div > div.ant-table-scroll > div.ant-table-body")
    var rightTable = document.querySelector("#dataTable > div > div > div > div > div.ant-table-fixed-right > div.ant-table-body-outer > div")          
    // 滚动的高度
    let scrollTop = table.scrollTop;//rightTable.scrollTop;
    // 下一次开始的索引
    this.startIndex = Math.floor(scrollTop / this.cellHeight);
    // 滚动操作
    document.querySelector("#dataTable > div > div > div > div > div.ant-table-scroll > div.ant-table-body > table > tbody").style.transform = `translateY(${this.startIndex * this.cellHeight}px)`;
    document.querySelector("#dataTable > div > div > div > div > div.ant-table-fixed-right > div.ant-table-body-outer > div > table > tbody").style.transform = `translateY(${this.startIndex * this.cellHeight}px)`;
    // 滚动到底，加载新数据
    if (table.scrollHeight <= scrollTop + table.clientHeight) {
      return;
    }
},


添加computed计算：
    tableheight: function() {
        var bodyHeight = this.$store.getters['basedata/bodyHeight'];
        var tableheight = bodyHeight - this.reduceHeight;
        return tableheight;
    },
    // 根据开始行 动态放入数据到表格进行渲染
    sliceTable() {
        return this.data.slice(this.startIndex, this.startIndex + 50);
    },
   //动态计算表格高度
    cellHeight(){
        if(this.pagination.size == 'default'){
            return 54;
        } else if(this.pagination.size == 'middle'){
            return 46;
        } else if (this.pagination.size == 'small'){
            return 30;
        }else{
             return 46;
        }
    }


修改加载数据：校准滚动条高度
this.$nextTick(() => {
    // 计算表格所有数据所占内容的高度
    this.vEle.style.height = this.data.length * this.cellHeight + "px";
    
    var table = document.querySelector("#dataTable > div > div > div > div > div.ant-table-scroll > div.ant-table-body")
    // 设置成绝对定位，这个元素需要我们去控制滚动
    document.querySelector("#dataTable > div > div > div > div > div.ant-table-scroll > div.ant-table-body > table").style.position = "absolute";
    // 把这个节点加到表格中去，用它来撑开表格的高度
    var blankDivTable = table.querySelector(".blankDiv")
    if(blankDivTable){
        blankDivTable.style.height = this.data.length * this.cellHeight + "px";
    }else{
        table.appendChild(this.vEle);
    }
    var table2 = document.querySelector("#dataTable > div > div > div > div > div.ant-table-fixed-right > div.ant-table-body-outer > div")
    // 设置成绝对定位，这个元素需要我们去控制滚动
    var table2Body = document.querySelector("#dataTable > div > div > div > div > div.ant-table-fixed-right > div.ant-table-body-outer > div > table")
                    
    // 把这个节点加到表格中去，用它来撑开表格的高度
    var blankDivTable2 = table2.querySelector(".blankDiv")
    if(blankDivTable2){
        blankDivTable2.style.height = (this.data.length-50) * this.cellHeight + "px";
    }else{
        table2.appendChild(this.vEle);
    }
});

1.gif