写个后台遇到点小波折，使用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做，看到上面代码就能懂什么意思。
如果有不明白的，欢迎评论区讨论。有错误欢迎指正
