VUE+Element-ui实战之新增弹出框和编辑弹出框共用一个组件

实战场景描述

我们在实际开发过程中，增删改查功能是最基础必不可少的，这里就少不了新增和编辑功能，通常都是点击按钮触发弹出框动作。

基本上新增和编辑的表单是一致的，只不过一个是空的，而另一个需要赋原始值。

因此抽出一个组件进行复用，会大大减小代码量。

首先学会点击按钮触发弹出框动作：VUE弹窗加载另一个VUE页面

1、el-table基本设置

ActivityManage.vue全部代码：

以上代码需要注意的点：

1. dialog的引用，为了表单提交方便，我们把“提交”“取消”按钮放到了基础页
2. el-switch在el-table中的使用
3. 对于某些字段的formatter

2、抽离出弹窗组件

ActivityWindow.vue完整代码： 

至此，我们只是给添加和编辑按钮弹窗动作。

3、编辑时设置form表单初始化

 首先点击编辑按钮，会将表格的row数据提取出来，而这个row就是编辑弹窗的初始表单，因此需要有一个表单的传递和接收过程。

在基础页传递参数给弹窗

        this.$nextTick(()=>{
          this.$refs.popWindow.dataInit(row);
        })

弹窗接收参数并复制给form表单

      dataInit(data){
            if(data){
              this.form = data;
            }
      },

4、表单提交时做添加/编辑状态的区分

因为两个操作共用一个组件，在提交时还需要一个参数做区分，然后根据这个参数状态确定对应的axious

5、最终呈现效果：

6、页面完整代码

ActivityManage.vue完整代码：

 ActivityWindow.vue完整代码：

一点疑问

在给编辑弹窗赋初始值时，遇到一个很费解的小问题，给radio赋初始值，我在其他项目中都是用以下这种形式的：

                    
                        
                            男
                            女
                        
                    

但是这个测试项目中如法炮制却不行，没办法默认选中初始值，最后试着用了这样的，没想到可以啦

            
                
                    是
                    否
                
            

我比较了两个项目中用到的vue和Element-UI的版本都是一致的，想不出是哪里出了问题，在此说明一下，如果有了解的小伙伴欢迎留言指摘。