新增

1. 在template模板中把Element Ui组件库中的el-form给拷贝进来(选择有表单验证的)，例:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="姓名：" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="密码：" prop="password">
    <el-input type="password" v-model="ruleForm.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

2. 在data中定义el-form标签中的属性

data() {
  return {
    ruleForm: {
      name: '',  //对应上边的姓名
      password: ""  //对应上边的密码
    },
    rules: {
      // 姓名的验证
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
      ],
      // 密码的验证
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
      ],
    }
  }
}

3. 在methods中定义提交按钮和重置按钮的方法

methods: {
  // 提交表单
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        // 在这里进行axios的网络请求
        // 例如：post请求
        this.$http({
          url: '/user/insert',
          method: 'post',
          data: ruleForm  //上边ruleForm对象传过来
        }).then(res => {
          // 可以先把res打印出来看一下
          console.log(res);
          // res对象中会返回code状态码和msg消息
          //判断code状态码不等于200的时候，返回错误消息
          if(code != 200){
            this.$message.error(msg);
          }
          // 返回200的话，说明添加成功，返回成功消息
          this.$message.success(msg);
          // 调用你查询列表的方法，例如：
          this.getList();  //添加完成后,查询列表,数据就会显示在页面上
        })
      } else {
        this.$message.error("字段没有输入正确，请重新输入!");
        return false;
      }
    });
  },
  // 重置表单
  resetForm(formName) {
    this.$refs[formName].resetFields();
  } 
}

删除

1. 首先template模板中需要有一个删除按钮

<el-button size="mini" type="text" @click="deleteSingle(id)">删除</el-button>

2. 在metheds中编写点击事件和删除请求

async deleteSingle(id) {
  const confirmResult = await this.$confirm('请问是否要永久删除该用户', '删除提示', {
    confirmButtonText: '确认删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).catch(err => err)

  // 如果用户点击确认，则confirmResult 为'confirm'
  // 如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
  if (confirmResult != "confirm") {
    return this.$message.info("已经取消删除")
  }
  // 发送请求根据id完成删除操作
  this.$http({
    url: '/user/delete',
    method: 'delete',
    data: id
  })then(res => {
    let {code, msg} = res;
    // 判断如果返回的状态码不是200，表示删除失败，就做提示
    if (code != 200) {
      this.$message.error(msg);
    }
    // 删除成功的提示
    this.$message.success(msg);
    // 重新请求最新的数据
    this.getList();
  })
}

修改

1. 首先template模板中需要有一个修改按钮和修改表单的弹出框

<el-button type="primary" size="mini" icon="el-icon-edit" @click="updateSingle(id)">修改</el-button>
<el-dialog title="修改页面" :visible.sync="updateOpen " width="500px" append-to-body @close="editDialogClosed">
  <el-form :model="updateSingleData" :rules="rules" ref="updateSingleData" label-width="100px" class="demo-ruleForm">
    <el-form-item label="姓名：" prop="name">
       <el-input v-model="updateSingleData.name"></el-input>
    </el-form-item>
    <el-form-item label="密码：" prop="password">
      <el-input type="password" v-model="updateSingleData.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitFormUpdata('updateSingleData')">立即创建</el-button>
      <el-button @click="resetForm('updateSingleData')">重置</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

2. 在data中定义el-dialog和el-form标签中的属性

data() {
  return {
    updateSingleData: {
      name: '',  //对应上边的姓名
      password: ""  //对应上边的密码
    }，
    updateOpen : false   // 用来控制弹出框，对应el-dialog标签的:visible.sync="updateOpen "
}

修改表单的表单验证rules属性使用上边新增的就可以了，不冲突

3. 在methods中定义提交按钮和重置按钮的方法

methods: {
  //修改按钮的点击事件
  updateSingle(id){
    this.updateOpen = true; // 控制弹出层
    // 在这里可以做一些回显的操作
  }，
  submitFormUpdata(updateSingleData) {
    this.$refs[updateSingleData].validate((valid) => {
      if (valid) {
        // 调用修改接口
        updateSingleAccount().then(res => {
          let {code, msg} = res;
          if (code === 200) {
            this.$message.success(msg);
            this.open = false;
            this.getList();
          }
        })
      } else {
        this.$message.error("你输入的信息不完整，不允许提交！")
        return false;
      }
    });
  },
  // 修改表单的重置按钮
  resetForm(updateSingleData) {
    this.$refs[updateSingleData].resetFields();
  },
  //对话框关闭之后，重置表单
  editDialogClosed() {    // 对应el-dialog标签的@close="editDialogClosed"
    this.$refs.updateSingleData.resetFields()
  }
}