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

最新推荐文章于 2025-02-12 18:15:33 发布

Best_Liu~

最新推荐文章于 2025-02-12 18:15:33 发布

阅读量1.9k

点赞数 4

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/askuld/article/details/129835179

版权

当el-table数据量过大时，可采用懒加载方法优化，通过监听滚动事件，在用户滚动到底部时动态加载更多数据，避免一次性渲染所有数据造成浏览器崩溃。文中提供了具体的Vue指令实现和数据处理逻辑，以及如何处理滚动条和固定列的滚动问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'; //自定义高度需求
      }
    },

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

<style>
  .el-table__body-wrapper{
       z-index: 2
  }
  .el-table__fixed {
    height: auto !important; 
    bottom: 1px;
    position: absolute;
    top: 0;
    left: 0;
  }
  </style>