PC弹框点击确认,数据新增成功,关闭弹框

<el-dialog width="500px" :visible.sync="showDialog" title="新增角色">
  <el-form-item>
	   <el-row type="flex" justify="center">
	       <el-col :span="12">
	          <el-button size="mini" type="primary" @click="btnoK"
	            >确认el-button
	          >
	          <el-button size="mini" @click="btnCancel">取消el-button>
	        el-col>
	      el-row>
  el-form-item>
el-dialog>
//data数据
showDialog: false,
 form: {
     description: "", //角色描述
      name: "", //角色名称
      state: 0, //关闭 0 打开1
    },
  methods:{
  btnoK() {
      this.$refs.Form.validate(async (valid) => {
        if (valid) {
          // alert("submit!");
          //调用新增接口
          await addRole(this.form);
          this.$message.success("新增角色成功");
          //刷新数据
          this.getRoleList();
          //调用关闭
          this.btnCancel();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //点击关闭时触发
    btnCancel() {
    //重置表单
      this.$refs.Form.resetFields();
      //关闭弹框
      this.showDialog = false;
    },
   }

效果
PC弹框点击确认,数据新增成功,关闭弹框_第1张图片

你可能感兴趣的:(javascript,前端)