Vue之ElementUI实现CUD（增删改）及表单验证

目录

前言 

一、CUD（增删改）功能实现

1. 配置CUD（增删改）功能的接口

 2. 编写新增窗体界面及完成新增功能

效果

 ​编辑

3. 编写编辑功能代码

添加操作栏

编写功能js代码

效果展示

4. 编写删除功能的代码及提示框

删除功能的方法

 展示效果

二、表单验证

功能js编写

规则

 启用表单

效果

 ​编辑

---

前言 

        上期的博客中我与大家分享了有关Vue和ElementUI实现项目左侧的动态树形菜单栏及将数据从数据库拿到在前端与数据表格进行绑定交互，而且还实现了模糊查询和分页条的功能。今天的这期博客Vue之ElementUI实现CUD（增删改）及表单验证是居于上一期博客的数据表格的基础上实现增删改及表单验证的功能，希望大家能够耐心仔细阅读完，谢谢大家的支持。

一、CUD（增删改）功能实现

1. 配置CUD（增删改）功能的接口

        在action.js文件中配置CUD（增删改）功能的请求接口方法，方便后续代码开发调用。

注意：在准备进行后续开发的时候，记得将src文件下的main.js文件中的process.env.MOCK && require('@/mock')即mockjs注释掉否则影响开发。

 2. 编写新增窗体界面及完成新增功能

注意事项：

        记得在提交新增请求数据后，加上 this.clear();//关闭
          this.query({});//刷新两行代码。

效果

 

3. 编写编辑功能代码

添加操作栏

编写功能js代码

效果展示

4. 编写删除功能的代码及提示框

删除功能的方法

del(idx, row) {
        this.$confirm('此操作将永久删除id为'+row.id+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           let url = this.axios.urls.Book_DEL;
          this.axios.post(url, {id:row.id}).then(r => {
            console.log(r);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.query({}); //刷新

          }).catch(e => {

          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

 

 展示效果

二、表单验证

在form表单中要包含:rules="rules" ref="ruleForm"代码。

Form 组件提供了表单验证的功能，只需要通过 属性传入约定的验证规则，并将 Form-Item 的 属性设置为需校验的字段名即可。校验规则参见 async-validatorrulesprop

 

功能js编写

规则

 rules: {
          bookname: [{
              required: true,
              message: '请输入书籍名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 1 到 9 个字符',
              trigger: 'blur'
            }
          ],
          price: [{
              required: true,
              message: '请输入书籍价格',
              trigger: 'blur'
            }],
          booktype: [{
            required: true,
            message: '请选择书籍类型',
            trigger: 'change'
          }]
        }

 启用表单

this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

效果

 

 今天的分享到此结束，感谢支持，三连加关注就是对博主最大的支持。