1. 前言

最近在做后台管理，一个页面中会用到多个弹窗，所以整合成一个弹窗就好，另外需要判断用户点击是编辑还是新增，相应的进行一些操作，这个问题也挺常见的，记录一下吧~

新增弹窗

编辑弹窗

2. 问题

首先，这里有两个问题

1. 编辑所在的这个组件和新增所在的这个组件这是两个子组件，怎么让编辑和新增同时使用一个弹窗
2. 点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的

3. 解决问题

针对问题一：
绑定title，在data里面定义dialogTitle为空，然后点击新增或者编辑弹窗之前给他赋值

<el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="600px"
      @close="resetFrom('roleForm')"
    >
      <el-form
        :model="dialogForm"
        :rules="rules"
        ref="roleForm"
        label-width="90px"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="dialogForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="detail">
          <el-input v-model="dialogForm.detail"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="success" @click="save('roleForm')">保存</el-button>
      </div>
    </el-dialog>

data() {
    return {
      dialogFormVisible: false,
      dialogTitle: "",
      dialogForm: {
        name: "",
        detail: ""
      },
      dialogForm_null: Object.assign({}, this.dialogForm),
      rowIndex: 9999,
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        detail: [{ required: true, message: "请输入角色描述", trigger: "blur" }]
      }
        }

  methods: {
    addRoles() {
      this.dialogTitle = "添加角色";
      this.dialogForm = Object.assign({}, this.dialogForm_null);
      this.dialogFormVisible = true;
    },
    //重置表单规则
    resetFrom(roleForm) {
      this.$refs[roleForm].clearValidate();
    },
    handleButton(val) {
      //调用事件
      this[val.methods](val.row, val.index);
    },
    edit(row, index) {
      console.log(row);
      this.dialogTitle = "角色修改";
      this.dialogForm = Object.assign({}, row);
      this.dialogFormVisible = true;
      this.rowIndex = index;
    },
  },

针对问题二：点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的

获取弹窗表单里是否有id，this.dialogForm.id id有值为编辑，没有的话为新增
编辑用splice() 方法去修改数据；
新增在数据最顶部再添加unshift()一条数据

这是在前端模拟数据，正常情况下如果是编辑或者新增，都得请求接口把数据传给后端，再请求接口刷新一次页面

  // 保存，之前这里出错了，所以多打印几次找到错误在哪
    save(roleForm) {
      console.log(this.dialogForm); //打印值到底存上了没有
      this.$refs[roleForm].validate(valid => {
        console.log(this.dialogForm);
        console.log(valid);
        if (valid) {
          let id = this.dialogForm.id;  //获取弹窗表单里是否有id，有id为编辑，没有的话为新增，点击编辑时已经从表格中获取到该行的值了
          console.log(id);
          if (id) {
            //id非空 - 编辑
            this.renderdata.splice(this.rowIndex, 1, this.dialogForm);
          } else {
            //id为空 - 新增
            this.dialogForm.id = this.renderdata.length + 1;
            console.log(this.dialogForm);
            this.renderdata.unshift(this.dialogForm);
          }
          this.dialogFormVisible = false;
          this.$message({
            type: "success",
            message: id ? "修改成功！" : "新增成功！"
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }

如果有什么问题，欢迎指正，共同进步哦~