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;
        }
      });
    }

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

Logo

前往低代码交流专区

更多推荐