在使用vue的时候，我们因为常用v-if改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡住，需要刷新才可以解决

今天测试提了一个BUG，提交申请后页面卡住了，列表加载不出来，控制台报了DOM异常的错

第一眼看到这个报错真的是一脸懵逼，不知道哪有问题，最离谱的是只有测试的电脑才有这个问题......

首先我们根据报错，可以得知是DOM结构异常导致的

排查过程很艰辛但是不重要，咱们直接来看结果

最后排查出是funds-borrowing-pop组件移除后导致的DOM结构异常

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      ...
    </el-form>

    <!-- 表单 -->
    <el-table
      v-loading="loading"
      :data="fundsLoanList"
      @selection-change="handleSelectionChange"
      stripe
      :height="`calc(100vh - 280px)`"
      id="fixed_table_list"
    >
      <el-table-column type="selection"  width="50" />
      ...
    </el-table>
    
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <funds-borrowing-pop
      v-if="borrowingStatus"
      @handleClose="handleClose"
      :title="title"
      :editId="editId"
    ></funds-borrowing-pop>
  </div>
</template>

把组件和页面主体用div隔离开即可

<template>
  <div class="app-container">
   <div v-if="!borrowingStatus">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      ...
    </el-form>

    <!-- 表单 -->
    <el-table
      v-loading="loading"
      :data="fundsLoanList"
      @selection-change="handleSelectionChange"
      stripe
      :height="`calc(100vh - 280px)`"
      id="fixed_table_list"
    >
      <el-table-column type="selection"  width="50" />
            ...
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
   </div>

    <div v-if="borrowingStatus">
      <funds-borrowing-pop
        @handleClose="handleClose"
        :title="title"
        :editId="editId"
      ></funds-borrowing-pop>
    </div>
  </div>
</template>

结论：一般报这种DOM异常的，直接去排查影响DOM结构操作相关或者与操作相关的DOM即可

版权属于：FoXiMao

本文链接：https://www.foximao.com/foreEnd/Vue_diff_DOM_Exception.html

转载时须注明出处及本声明