vue+elementui查询表格数据页面卡死问题

最新推荐文章于 2024-09-01 22:07:18 发布

nixy

最新推荐文章于 2024-09-01 22:07:18 发布

阅读量1.7k

点赞数

分类专栏： VUE 文章标签： vue elementui

本文链接：https://blog.csdn.net/calmboy_/article/details/115188714

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了一个Vue项目部署到Tomcat服务器后，查询数据时出现页面卡死并伴有Vue warn警告的情况。通过debug发现是由于表格数据循环时修改了vm.$data导致的潜在无限循环。解决方案是移除直接修改数据的行为，改为v-if控制显示状态。

摘要由CSDN通过智能技术生成

一问题描述

vue+elementui项目，本地idea启动，功能测试没问题，部署到tomcat服务器，查询表格数据，正确返回后，页面卡死。

浏览器console栏有vue warn信息：you may have an infinite update loop in a component render function

二排查

debug调试，确实存在循环调用vue源码方法问题，具体原因未知。问题定位在如下代码第四行处：

surveyTemplateSelect(params).then((result) => {
            if (result.data.status == 0) {
              console.log(result.data);
              this.tableData = result.data.data.pageInfo.list;
              this.tableDataNum = result.data.data.pageInfo.total;
              this.loading = false;

            }
            ...

控制台打印后台返回数据，pageInfo.list格式正确，可能是表格填充数据时发生的问题；

参考帖子：https://segmentfault.com/a/1190000011156865?utm_source=tag-newest，在 v-for 循环当中，如果用方法或者计算属性对 vm.$data 的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环。此时 Vue 就会发出警告（并不是真的已经无限循环了）。

查找表格数据相关代码，在以下片段中，status进行:formatter时，找到有关修改vm.$data的操作：this.statusBtn=xxx;将这段代码注释掉，不再提示warn信息；

<el-table-column prop="status" align="center" label="有效状态" :formatter="statusFormat" height="36px"></el-table-column>
<el-table-column prop="set" align="center" label="操作" height="36px">
<template slot-scope="scope">
   <el-button @click.native="handleTemplateStatus(scope.row)"  type="text" class="delete" size="small">{{statusBtn}}</el-button>
   <el-button type="text" size="small" class="modify" @click="handleEdit(scope.$index,scope.row)">修改</el-button><!--@click="handleUpdateClick(scope.row)-->
</template>
</el-table-column>

statusFormat(row,column){
          if(row.status=='1'){
            this.statusBtn = '激活';
            return '无效';
          }else if(row.status=='0'){
            this.statusBtn = '注销';
            return '有效';
          }else{
            this.statusBtn = ''
            return '';
          }
        },

三解决

将status值与激活/注销按钮的联动，用v-if控制，避免在表格数据循环渲染时，直接修改vm.$data里的属性

  <el-table-column prop="set" align="center"  label="操作" height="36px">
          <template slot-scope="scope">
            <el-button @click.native="handleDeadTemplateStatus(scope.row)" v-if="scope.row.status=='1'" type="text" class="delete" size="small">激活</el-button>
            <el-button @click.native="handleAliveTemplateStatus(scope.row)"  v-if="scope.row.status=='0'" type="text" class="delete" size="small">注销</el-button>
            <el-button type="text" size="small" class="modify" @click="handleEdit(scope.$index,scope.row)">修改</el-button><!--@click="handleUpdateClick(scope.row)-->
          </template>
        </el-table-column>