Vue+Element 用同一个el-dialog弹框完成新增和编辑操作

 

 

       在实际业务中我们往往选择用同一个弹框组件来同时实现新增和编辑操作。但el-dialog弹框的visible.sync设置显示和隐藏往往带来很多额外的工作:处理数据的变更,带校验表单的内容移除和校验清除等

       这需要我们在各种隐藏的bug里耗费很多精力,处理难度会随着表单内容复杂程度的增加不断提高。(实际业务场景中经常出现非常复杂的表单页面)

下面的例子使用v-if既保证数据干净每次都是新弹框不存在数据遗留和互相污染,又保留弹框弹出效果让整个调用逻辑非常简单

  • 不用担心不同数据调用弹框造成的数据污染和页面bug
  • 保留了Element提供的el-dialog弹框弹出特效
  • 模拟了完整的操作流程

实现的最终效果如下:

demo有两个文件,dialogDemo/index.vue页面,弹框组件dialogComponent.vue

dialogDemo/index.vue完整页面代码:






弹框组件dialogComponent.vue完整页面代码:






两个文件正确引入可直接查看效果,以上(#^.^#)

 

你可能感兴趣的:(web前端,element,UI)