vue el-table数据量太大，导致浏览器崩溃问题解决办法

el-table数据量太大会导致浏览器渲染时间太长，导致浏览器崩溃，采用懒加载方法，可以完美解决此类情况

上面是表格代码

v-loadmore='loadmore' 懒加载方法

    name: "Statistics",    directives: {      loadmore: {        bind (el, binding) {          const selectWrap = el.querySelector('.el-table__body-wrapper')          selectWrap.addEventListener('scroll', function () {            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight            // 判断是否到底,scrollTop为已滚动到元素上边界的像素数，scrollHeight为元素完整的高度，clientHeight为内容的可见宽度            if (scrollDistance  {            this.dataList = response.data;            this.loading = false;            //由于物资太多，默认展示前30条            this.tableList = response.data.slice(0,this.resourcePage);            this.resourceTotal = this.tableList.length;            this.resourceNum=1;            //跳到顶部操作            this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置          }        );      },      //懒加载下拉列表--start      loadmore () {        this.resourceNum++;        this.searchLoadResource();      },      searchLoadResource(){        let result = []        if(this.resourcePage*this.resourceNum  0){          var pushFlg = '';          // 这个循环是因为下拉框滚动条的时候，有时会揍两遍方法，导致数据重复添加          // 循环中的判断是为了不让数据重复添加          for(var i =0; i  item.id === result[i].id)  
至此完美解决
 
本文涉及到滚动条问题，需要重置滚动条高度的话，添加下面代码即可
 
//跳到顶部操作this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置
  
附
 
table滚动区高度设置
 
computed: {      // 滚动区高度       scrollerHeight: function() {        return (window.innerHeight - 300) + 'px'; //自定义高度需求      }    },
 
解决横向混动条在固定列不可滚动问题，本人采用下面样式解决
 
  .el-table__body-wrapper{       z-index: 2  }  .el-table__fixed {    height: auto !important;     bottom: 1px;    position: absolute;    top: 0;    left: 0;  }