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

- 日理万妓 2023-10-08 22:46 73阅读 0赞

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

<el-table v-loading="loading"
                      :data="tableList"
                      ref="containerTable"
                      border
                      stripe
                      v-loadmore='loadmore'
                      :height=scrollerHeight
                      :cell-style="columnbackgroundStyle"
                      :header-cell-style="{backgroundColor:'#E4E4E4',color:'#000000'}">
                      <el-table-column label="序号" align="center" prop="index" width="50" fixed/>
                      <el-table-column label="部门" align="left" prop="deptName" width="100" fixed />
                      <el-table-column label="仓库" align="left" prop="wareName" width="200" fixed />
                      <el-table-column label="物资编码" align="left" prop="matNo" fixed :show-overflow-tooltip="true" />
                      <el-table-column label="物资名称" align="left" prop="matName" width="250" fixed :show-overflow-tooltip="true" />
                      <el-table-column label="物资分类" align="left" prop="materialTypeName" fixed :show-overflow-tooltip="true" />
                      <el-table-column label="型号" align="left" prop="matModel" fixed :show-overflow-tooltip="true" />
                      <el-table-column label="备注" width="50" align="left" prop="remark" />
                    </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 <= 10) {
                  binding.value()
                }
              })
            }
          }
        },
        data() {
          return {
            //懒加载下拉列表--start
            resourceTotal:0,
            resourceNum:1,
            resourcePage:50,
            //懒加载下拉列表--end
          }
        }

/** 查询字典类型列表 */
          getList() {
            this.loading = true;
            this.queryParams.materialIds=null;
            listInfo(this.queryParams).then(response => {
                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 < this.dataList.length){
              result = this.dataList.slice(this.resourcePage*(this.resourceNum-1),this.resourcePage*this.resourceNum)
            }else{
              result = this.dataList.slice(this.resourcePage*(this.resourceNum-1),this.dataList.length)
            }
            this.resourceTotal = result.length;
            if(this.tableList.length > 0){
              var pushFlg = '';
              // 这个循环是因为下拉框滚动条的时候，有时会揍两遍方法，导致数据重复添加
              // 循环中的判断是为了不让数据重复添加
              for(var i =0; i < result.length; i++){
                if(this.tableList.findIndex(item => item.id === result[i].id) < 0){
                  pushFlg = 'push';
                  break;
                }
              }
              if(pushFlg === 'push'){
                this.tableList = this.tableList.concat(result);
              }
            }else{
              this.tableList = result;
            }
          },
          //懒加载下拉列表--end

至此完美解决

本文涉及到滚动条问题，需要重置滚动条高度的话，添加下面代码即可

//跳到顶部操作
    this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置

附

table滚动区高度设置

computed: {
          // 滚动区高度 
          scrollerHeight: function() {
            return (window.innerHeight - 300) + 'px'; //自定义高度需求
          }
        },

解决横向混动条在固定列不可滚动问题，本人采用下面样式解决