elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示（SpringBoot+Vue+MybatisPlus）

文章目录

• 1、添加新用户，通过dialog的弹窗形式
• • 1.1 添加的按钮
  • 1.2 调用方法设置窗口可见
  • 1.3 窗口代码
  • 1.4 提交注册信息方法
  • 1.5 使用mybatisPlus方法进行添加信息到数据库
• 2、删除用户信息之前进行信息提示
• • 2.1 代码块
  • 2.2 删除方法
• 3、效果展示

1、添加新用户，通过dialog的弹窗形式

1.1 添加的按钮

      <el-button
                  type="primary"
                  size="small"
                  round
                  @click="addNewUser()"
                  >添加用户</el-button
                >

        

          
        
        
        

          

          AI 代码解读
        
      
      

1.2 调用方法设置窗口可见

注意：adddialogVisible: false,默认是false，默认窗口不可见

  //添加用户窗口
    addNewUser() {
      this.adddialogVisible = true;
    },

        

          
        
        
        

          

          AI 代码解读
        
      
      

1.3 窗口代码

       <el-dialog
                title="添加新用户"
                :visible.sync="adddialogVisible"
                width="30%"
                :close-on-click-modal="false"
              >
                <el-form
                  style="width: 80%"
                  :model="UserForm"
                  :rules="rules"
                  label-width="100px"
                  ref="UserForm"
                  class="demo-ruleForm"
                >
                  <el-form-item label="姓名" prop="userName">
                    <el-input
                      prefix-icon="el-icon-user"
                      class="letLine"
                      v-model="UserForm.userName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="UserForm.nickName"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input v-model="UserForm.password"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="gender">
                    <el-input v-model="UserForm.gender"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="UserForm.email"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="UserForm.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证" prop="idCard">
                    <el-input v-model="UserForm.idCard"></el-input>
                  </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="resetForm('UserForm')">重置</el-button>
                  <el-button @click="adddialogVisible = false">取 消</el-button>
                  <el-button
                    type="primary"
                    round
                    @click="submitForm('UserForm')"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>

        

          
        
        
        

          

          AI 代码解读
        
      
      

1.4 提交注册信息方法

提示：这里完成的效果：用户注册成功、会以弹窗的形式提示用户信息添加成功

   // //添加用户
    submitForm(UserForm) {
      const _this = this;
      this.$refs[UserForm].validate((valid) => {
        if (valid) {
          axios.post("/user/register", this.UserForm).then(function (resp) {
            if (resp.data.code == 200) {
              _this.adddialogVisible = false; //dialog对话窗口关闭
              // alert("添加成功") 跳转的路由
              _this.$alert(
                "《" + _this.UserForm.userName + "》添加成功",
                "消息",
                {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    _this.showAllUserInfo();
                  },
                }
              );
              _this.showAllUserInfo();
            } else {
              _this.$message.error(resp.data.data.errMessage);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

        

          
        
        
        

          

          AI 代码解读
        
      
      

1.5 使用mybatisPlus方法进行添加信息到数据库

2、删除用户信息之前进行信息提示

2.1 代码块

     <el-table-column fixed="right" label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >查看</el-button
                    >
                    <el-button type="text" size="small">编辑</el-button>
                    <el-popconfirm
                      confirm-button-text="好的"
                      cancel-button-text="不用了"
                      icon="el-icon-info"
                      icon-color="red"
                      title="确定删除该用户吗？"
                      @confirm="handleDelete(scope.$index, scope.row)"
                    >
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        slot="reference"
                      ></el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.2 删除方法

    //删除用户
    handleDelete(index, row) {
      const _this = this;
      axios.delete("/user/deleteUser/"+row.idCard).then((resp) => {
        if (resp.data.code == 200) {
          _this.$alert("删除用户成功", "消息", {
            confirmButtonText: "确定",
            callback: (action) => {
              _this.showAllUserInfo();
            },
          });
        } else {
          _this.$message.error(resp.data.data.errMessage);
        }
      });
    },

        

          
        
        
        

          

          AI 代码解读
        
      
      

3、效果展示