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

最新推荐文章于 2023-10-10 08:45:00 发布
最新推荐文章于 2023-10-10 08:45:00 发布
阅读量568 收藏
点赞数
分类专栏： Vue vue-cli 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74352229/article/details/133344786
版权
Vue 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
vue-cli
2 篇文章 0 订阅
订阅专栏

目录

前言 

一、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. 编写新增窗体界面及完成新增功能

<template>
  <div class="books" style="padding: 20px;">
    <!-- 1.搜索框 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <!-- 新增按钮 -->
        <el-button type="primary" @click="open">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 2.数据表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="书籍编号" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书籍名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="书籍价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书籍类型">
      </el-table-column>
    </el-table>
    <!-- 3.分页条 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 编辑窗体 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book">
        <el-form-item label="书籍编号" :label-width="formLabelWidth">
          <el-input v-model="book.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍名称" :label-width="formLabelWidth">
          <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth">
          <el-input v-model="book.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍类别" :label-width="formLabelWidth">
          <el-select v-model="book.booktype" placeholder="请选择活动区域">
            <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dosub">确 定</el-button>
      </div>
    </el-dialog>

  </div>


</template>

<script>
  export default {
    data() {
      return {
        bookname: '',
        tableData: [],
        rows: 10,
        page: 1,
        total: 0,
        title: '新增窗体',
        dialogFormVisible: false,
        formLabelWidth: '100px',
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        },

        types: []

      }

    },
    methods: {
      // 提交
      dosub(){
        let url = this.axios.urls.Book_ADD;
        if(this.title == '编辑窗体'){
          url = this.axios.urls.Book_UPD;
        }
        let params = {
          id:this.book.id,
          bookname:this.book.bookname,
          price:this.book.price,
          booktype:this.book.booktype
        }
        this.axios.post(url, params).then(r => {
          console.log(r);
          this.clear();//关闭
          this.query({});//刷新

        }).catch(e => {

        })
      },
      // 初始化窗体
      clear() {
        this.dialogFormVisible = false;
        this.title='新增窗体';
        this.book={
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
      },
      open() {
        // 待开窗体
        this.dialogFormVisible = true;

      },

      // 定义一个查询的方法，方便调用减少代码冗余
      query(params) {
        // 向后台请求数据的访问路径
        let url = this.axios.urls.BookList;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.log(r);
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {

        })
      },
      onSubmit() {
        let params = {
          bookname: this.bookname,

        }
        // 调用查询方法
        this.query(params);
      },
      handleSizeChange(r) { //当页大小发生变化
        // 输出查看
        console.log("当前页大小:" + r);
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        // 调用查询方法
        this.query(params);
      },
      handleCurrentChange(p) { //当当前页页码大小发生变化
        // 输出查看
        console.log("当前页码:" + p);
        let params = {
          bookname: this.bookname,
          page: p,
          rows: this.rows
        }
        // 调用查询方法
        this.query(params);
      }
    },
    created() {

      // 调用查询方法
      this.query({});
      this.types = [{
        id: 1,
        name: '爱情'
      }, {
        id: 2,
        name: '玄幻'
      }, {
        id: 3,
        name: '激情'
      }]
    }
  }
</script>

<style>
</style>

注意事项：

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

效果

 

3. 编写编辑功能代码

添加操作栏

<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="open(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

编写功能js代码

<script>
  export default {
    data() {
      return {
        bookname: '',
        tableData: [],
        rows: 10,
        page: 1,
        total: 0,
        title: '新增窗体',
        dialogFormVisible: false,
        formLabelWidth: '100px',
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        },

        types: []

      }

    },
    methods: {
      // 提交
      dosub() {
        let url = this.axios.urls.Book_ADD;
        if (this.title == '编辑窗体') {
          url = this.axios.urls.Book_UPD;
        }
        let params = {
          id: this.book.id,
          bookname: this.book.bookname,
          price: this.book.price,
          booktype: this.book.booktype
        }
        this.axios.post(url, params).then(r => {
          console.log(r);
          this.clear(); //关闭
          this.query({}); //刷新

        }).catch(e => {

        })
      },
      // 初始化窗体
      clear() {
        this.dialogFormVisible = false;
        this.title = '新增窗体';
        this.book = {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
      },
      open(idx, row) {
        // 待开窗体
        this.dialogFormVisible = true;
        if (row) {
          this.title = '编辑窗体';
          this.book.id = row.id;
          this.book.bookname = row.bookname;
          this.book.price = row.price;
          this.book.booktype = row.booktype;
        }
      },

      // 定义一个查询的方法，方便调用减少代码冗余
      query(params) {
        // 向后台请求数据的访问路径
        let url = this.axios.urls.BookList;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.log(r);
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {

        })
      },
      onSubmit() {
        let params = {
          bookname: this.bookname,

        }
        // 调用查询方法
        this.query(params);
      },
      handleSizeChange(r) { //当页大小发生变化
        // 输出查看
        console.log("当前页大小:" + r);
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        // 调用查询方法
        this.query(params);
      },
      handleCurrentChange(p) { //当当前页页码大小发生变化
        // 输出查看
        console.log("当前页码:" + p);
        let params = {
          bookname: this.bookname,
          page: p,
          rows: this.rows
        }
        // 调用查询方法
        this.query(params);
      }
    },
    created() {

      // 调用查询方法
      this.query({});
      this.types = [{
        id: 1,
        name: '爱情'
      }, {
        id: 2,
        name: '玄幻'
      }, {
        id: 3,
        name: '激情'
      }]
    }
  }
</script>

效果展示

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;
          }
        });

效果

 

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

 

君易--鑨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+vue-resource+elementUI table组件实现增删改查和分页源码
08-30
实现功能：1.表格增删改查 2.表格分页3.excel导入导出
Vue之ElementUI实现登陆及注册
09-25
ElementUI提供了`el-form`组件的`rules`属性，可以方便地实现表单验证。通过自定义验证规则，我们可以设置错误消息并实时反馈给用户。 4. **状态管理Vuex**：对于大型项目，为了管理组件间的数据共享和状态，Vue...
Element-UI（增删改查）
最新发布
weixin_72997875的博客
10-10 586
data() {return {// 是否打开弹窗// 弹窗标题title: '新增页面',// 定义数组接收数据book:// 类型types: [],// 输入框长度// 初始化方法clear() {this.title = '新增页面';id: '',price: '',// 编辑if (row) {this.title = '编辑页面';// 增加修改提交//表单验证//验证通过执行增加修改方法//获取后台请求书籍数据的地址。
VUE通用后台管理系统（三）页面增删查改
qq_45600228的博客
07-22 1952
VUE通用后台管理系统（三）页面增删查改
论Vue实现简易的增删改查
唐昊
06-08 348
一、技术栈 列表显示 数组: v-for / index 对象: v-for / key 列表的更新显示 删除item 替换item 二、主题实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue-demo</title> </head> <body> <div id="demo">
elementui table 增删改查
weixin_43173924的博客
07-16 1984
<el-button @click="addRow()" type="success" icon="el-icon-plus" style="margin-bottom:10px;" size="mini" >添加勾选项</el-button> <el-ta...
vue+elementUI实现表单和图片上传及验证功能示例
10-17
主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
在Vue.js框架中结合Element UI库...通过以上方法，我们可以有效地管理Vue+ElementUI应用中的对话框关闭、表单验证和状态恢复，提供更好的用户体验。记住，保持应用状态的一致性和清晰性对于提高用户满意度至关重要。
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
10-17
主要介绍了Vue+elementUI的动态表单的校验(根据条件动态切换校验格式),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
【Vue.js】使用ElementUI实现增删改查(CRUD)及表单验证
m0_73192864的博客
09-27 1551
【Vue.js】使用ElementUI实现增删改查(CRUD)及表单验证
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
10-19
主要介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
VUE+Element实现增删改查的示例
01-22
前言 &最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。 因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直也没用过Element，就干脆趁机学一下吧。 实验步骤 首先引入一下element的css以及js <!-- 引入样式 --> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css rel=external nofollow rel=external nofollow > <!-- 引入组件
保姆级教学，让你用VUE来轻松实现简单的增删改查操作，不来看看吗
qq_52340302的博客
02-20 6382
文章目录1. HTML部分2. CSS部分3. JS部分源码 因为我是用vue来练练手，所以我并没有采用Element去实现，如果赶时间或者追求美观的各位推荐使用element。 下面直接就开门见山了，html和css部分就不多做介绍了，简易版本的增删改查也没有太过复杂的样式，js我会做很详细的讲解。 可分为三个部分：搜索和添加部分，编辑框部分(添加用户和修改共用)，列表部分。编辑框用v-show来决定显隐。 下面是简单的实现图： 1. HTML部分 <div class="add_info"&g
用vue写一个简单的增删改操作
huihui_999的博客
01-07 155
用vue写一个简单的增删改操作
vue 增删改查
weixin_30545285的博客
01-10 125
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue-2.5.13.min.js"></script> <style&...
Vue结合后台的增删改案例
weixin_33969116的博客
08-18 192
首先列表内容还是与之前的列表内容类似，不过此处我们会采用Vue中数据请求的方式来实现数据的增删。那么我们使用的Vue第三方组件就是vue-resource，vue发起请求的方式与jQuery的ajax相似，组要是请求地址与参数。和方法 首先我们先看到的是列表请求 获取列表 <table class=" table table-bordered table-ho...
ElementUI增删改的实现及表单验证
TestXzing的博客
10-10 414
ElementUI增删改的实现及表单验证
CUDA C编程手册: 编程接口（二）
吕爽
05-31 351
CUDA C编程手册: 编程接口（二）CUDA C 运行时 CUDA C 运行时
vue+elementui实现表格增删改查
05-13
可以通过 `el-form` 组件来实现表单验证，用 `el-form-item` 组件来定义表单项。用 `ref` 属性来引用表单实例，用 `$refs` 来获取表单实例。 最后，我们可以通过 `handleAdd`、`handleEdit`、`handleSubmit` 和 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值