element-ui + el-dialog出现卡顿

写个后台遇到点小波折，使用element-ui table时，经常有需要编辑、添加、删除等操作，习惯性在table中增加操作按钮，然后调用dialog弹窗显示数据进行编辑。这时候很容易遇到一个问题，在table中加入了dialog点击编辑按钮触发时，很卡需要很长时间才出现，这是网上查找"el-dialog出现卡顿" 会有很多答案，open方法监听打开后，渲染table长度这么层数的dialog导致卡顿。自己遇到问题时确实也在这里卡住了（现在想想傻不傻）。想着element-ui封装好的方法，怎么会错误。其实是自己用法用错了下面上代码：

      <el-table-column
            prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="(DialogAction(scope))">删除</el-button>
          </template>
      </el-table-column>

此处注意el-dialog的外层div和el-table是平级关系，不要写在table中。不然有多少行数据，就会渲染多少行dialog这就是问题所在

  </el-table>  
  <div>
      <el-dialog title="确认删除" :visible.sync='dialogFormVisible' :append-to-body='true'>
          <el-form>
              <el-form-item label="傻不傻:">
                {{this.obj.aaa}}
            </el-form-item>
          </el-form>
      </el-dialog>
  </div>

button中click绑定的方法实现如下，是否显示dialog设置为true。并把要显示的值复制到新对象中用于显示和提交

dialogAction(scope){
          this.dialogFormVisible = true
          this.Obj = scope.row
      },

代码没完整展示，只要参照element-ui做，看到上面代码就能懂什么意思。

如果有不明白的，欢迎评论区讨论。有错误欢迎指正