Element电商项目实践之表单验证

自定义校验规则（邮箱、手机）

1. 定义一个箭头函数,给箭头函数取个名字

2. 在具体的规则中通过validator来使用

效果：

添加表单的重置工作

1. 监听对话框的关闭事件

2. 拿到表单的ref，再调用resetFidles()

添加用户的预验证功能

代码：

      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser"
          >确 定</el-button
        >

  //点击按钮添加新用户
    addUser() {
        this.$refs.addFormRef.validate(valid => {
            // console.log(valid)
            if(!valid) return
            //验证通过，可以发起添加用户的网络请求
        })
    }

发起请求添加一个新用户

ddUser() {
      this.$refs.addFormRef.validate(async (valid) => {
        // console.log(valid)
        if (!valid) return
        //验证通过，可以发起添加用户的网络请求
        const { data: res } = await this.$http.post('users', this.addForm)

        if (res.meta.status != 201) {
          return this.$message.error('添加用户失败！')
        }
        this.$message.success('添加用户成功')
        //隐藏添加用户的对话框
        this.addDialogVisible = false
        // 重新获取用户的列表数据
        this.getUserList()
      })
    },

修改用户的操作

绘制修改对话框

实现修改表单的关闭之后的重置操作

参考添加表单的重置操作

提交修改表单之前预先校验

代码：

 <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo"
          >确 定</el-button
        >

 //修改用户信息并提交
    editUserInfo() {
      this.$refs.editFormRef.validate((valid)=>{
        console.log(valid)
      })

    }

修改用户信息的操作

// 控制修改对话框的显示与隐藏
      editDialogVisible: false,
      //  查询到用户的信息对象
      editForm: {},

<el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editUser(scope.row.id)"
            ></el-button>

async editUser(userid) {
      // 根据id获取用户信息
      const { data: res } = await this.$http.get('users/' + userid)
      if (res.meta.status !== 200)
        return this.$message.error('获取用户信息失败')
      this.editForm = res.data
      this.editDialogVisible = true
    },
    //修改用户信息并提交
    editUserInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return
        //发起修改用户信息的数据请求
        const { data: res } = await this.$http.put(
          'users/' + this.editForm.id,
          { email: this.editForm.email, mobile: this.mobile }
        )
        if (res.meta.status !== 200) {
          return this.$message.error('更新用户信息失败')
        }
        //修改成功，隐藏对话框，重新获取一下用户列表
        //  更新数据
        // 1.关闭对话框
        this.editDialogVisible = false
        // 2.刷新数据列表
        this.getUserList()
        // 3.提示修改成功
        this.$message.success('更新用户信息成功')
      })
    },

删除用户的操作

删除前应该要有提示，是否删除

在点击删除按钮的同时，弹出提示框，用到elementui的弹框组件Messagebox

$confirm需要挂载后使用

点击确认，返回值是一个promise,通过 async await 优化

如果用户确认则返回值为字符串confirm

如果用户取消了删除，则返回值为cancel

//根据id删除用户
    async removeUserById(id) {
      // 打印一下id值
      // console.log('需要删除的id',id)
      // 弹框询问用户是否删除数据
      const confirmResult= await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err =>{
        return err
      })
      //如果用户确认则返回值为字符串confirm
      // 如果用户取消了删除，则返回值为cancel
      // console.log(confirmResult)
      if(confirmResult !=='confirm'){
        return this.$message.info('已取消删除')
      }
      console.log('确认删除')
    },

完整删除

 async removeUserById(id) {
      // 打印一下id值
      // console.log('需要删除的id',id)
      // 弹框询问用户是否删除数据
      const confirmResult= await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err =>{
        return err
      })
      //如果用户确认则返回值为字符串confirm
      // 如果用户取消了删除，则返回值为cancel
      // console.log(confirmResult)
      if(confirmResult !=='confirm'){
        return this.$message.info('已取消删除')
      }
      // console.log('确认删除')
     const{data :res}  = await this.$http.delete('users/'+ id)
     if(res.meta.status !==200){
       return this.$message.error('删除用户失效')
     }
     this.$message.success('删除用户成功')
     //刷新用户列表
     this.getUserList()
    },