有关组件el-dialog和el-table冲突导致页面死循环的解决方案

这个问题也是有一阵子了。。。之前用的是公司的框架，导入element-UI的框架之后,常驻自己写一个弹窗,弹窗里有一个表格展示数据,但是会有页面卡死的问题。比如点X弹窗不关闭，点"关闭"弹窗不关闭等问题。

具体的问题情况如下:

这是父页面中引入的组件

组件大致代码如下:

<template>
    <el-dialog title="导入订单" :visible.sync="importOrderDialogs" width="50%" class="import-order-dialog"
        style="margin-top: 3vh;" :modal-append-to-body="false" @close="handleClose">
        <!-- <span>弹窗</span> -->
        <div>
            <div class="upload">
                <div class="upload-tips">选择您的xls订单文件，直接上传即可，系统会自动识别进行导入</div>
                <div class="upload-area">
                    <span class="upload-text">选择文件：</span>
                    <div class="upload-xls">
                        <div style="width: 300px" class="xlsxName">
                            <span>{{ addTemplateFile ? addTemplateFile.name : '选择要导入的订单xls文件' }}</span>
                            <span v-if="addTemplateFile" class="iconfont icon-close" @click="addTemplateFile = ''"></span>
                        </div>
                        <div class="search">浏览...</div>
                        <input class="hidden-button" ref="fileInput" type="file" accept=".xls, .xlsx"
                            @change="fileChange" />
                    </div>
                </div>
                <div class="upload-button">
                    <el-button type="warning" size="small" class="cancel" @click="handleClose">取消</el-button>
                    <el-button type="primary" size="small" class="upload" @click="importOrder">上传文件</el-button>
                </div>
            </div>
            <div class="table">
                <div class="title">
                    <span class="text">当前能识别的xls订单格式</span>
                    <span class="add" @click="editTemplate('add', null)">+新增模板</span>
                </div>

                <Table :loading="loading" border :columns="columns" :data="tableData">
                    <template slot="operation" slot-scope="{ row }">
                        <span style="color: #02a7f0; cursor: pointer" @click="downloadTemplate(row)">下载模板&nbsp;&nbsp;</span>
                        <span style="color: #02a7f0; cursor: pointer" @click="editTemplate('edit',row)">编辑&nbsp;&nbsp;</span>
                        <span style="color: #02a7f0; cursor: pointer" @click="deleteTemplate(row)">删除</span>
                    </template>
                </Table>
                <!-- <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                </el-table> -->
            </div>
        </div>

        <add-template-dialog ref="addTemplate" @addTemplateVisible="addTemplateVisible" @refreshList="queryTemplateList"
            :editType="editType" :addTemplateDialogs="addTemplateDialogs">
        </add-template-dialog>

    </el-dialog>
</template>

这里 如果把 Table 组件换成 el-table 组件(如下),就会导致页面卡死。我不知道为什么，特此发博客记录。也是用table实现了数据展示,用不了elementUI的el-table.

                    <!-- <el-table
          :data="tableData"
          border
          :header-cell-style="{
              background: '#f8f8f8',
              color: '#333333',
              padding: '5px 0',
              textAlign:'center'
          }"
          style="width: 100%">
           <el-table-column
           label="序号"
           align="center"
           type="index"
           width="50">
          </el-table-column>
          <el-table-column
            prop="templateName"
            label="当前支持识别的模板（直接导入能自动识别）"
            width="300">
          </el-table-column>
          <el-table-column
            prop="filedsCount"
            label="字段数量"
            align="center"
            width="70">
          </el-table-column>
          <el-table-column
            prop="type"
            align="center"
            width="70"
            label="类型">
            <template slot-scope="scope">
              {{scope.row.type == '0' ? '系统' : '自定义'}}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="200" align="center">
            <template slot-scope="scope">{{scope.row.createTime}}</template>
            </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <div class="opera">
              <span @click="downloadTemplate(scope.row)">下载模板</span>
              <div v-if="scope.row.type != '0'">
                <span @click="editTemplate('edit', scope.row)">编辑</span>
                <span @click="deleteTemplate(scope.row)">删除</span>
              </div>

              </div>

            </template>
          </el-table-column>

          </el-table> -->

这是几天前的错误了，具体f12的控制台报错具体内容忘了，好像是...死循环来着，导致页面卡死的。后面换成table组件就好了,不知道是不是公司前端框架不兼容的问题。特此记录。