• 基于Vue+ELement实现增删改查案例与表单验证（附源码）

    🎉🎉欢迎来到我的CSDN主页！🎉🎉

    🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

    🌟推荐给大家我的专栏《ELement》。🎯🎯

    👉点击这里，就可以查看我的主页啦！👇👇

    Java方文山的个人主页

    🎁如果感觉还不错的话请给我点赞吧！🎁🎁

    💖期待你的加入，一起学习，一起进步！💖💖

    请添加图片描述

    目录

    一、前言

    二、增删改查案例

    2.1.查询功能 

    2.2.新增功能

    2.3.修改功能

    2.4.删除功能

    三、表单验证 

    一、前言

    首先，Vue是一种流行的JavaScript框架，它提供了一种简洁易用的方式来构建用户界面。通过Vue的数据绑定和组件化思想，我们可以轻松地管理和更新用户界面的状态。

    其次，Element UI是一套基于Vue.js的组件库，提供了丰富的UI组件，包括表单、按钮、弹窗等。我们可以利用Element UI的组件来快速搭建出整洁美观的用户界面。

    在这个前端应用中，我们将使用Vue和Element UI来实现增加、删除、修改、查询等功能。通过Vue的双向数据绑定，我们可以实时更新用户输入的数据，并将其展示在界面上。同时，利用Element UI提供的表单验证功能，我们可以对用户的输入进行合法性验证，保证数据的正确性。

    总之，通过结合Vue和Element UI，我们可以轻松地构建一个功能完善、易于使用的前端应用，实现增删改查和表单验证的需求。

    二、增删改查案例

    基于上一篇文章我们所编写的数据表格实现增删改查，看过上篇文章的都知道，结合Vue+ELement实现功能还是比较简单的，今天主要是围绕上篇内容进行增删改查操作，如果文中有不动的地方可以看看上一篇文章或是往期内容介绍，先看看我们目前的效果。

    2.1.查询功能 

    查询功能就不过多介绍了，在上一篇已经实现了，这里直接上源码

    2.  
    3.  
    4.  
    5.  
    6. <script>
    7.   export default {
    8.     data() {
    9.       return {
    10.         bookname: "",
    11.         tableData: [],
    12.         rows: 10,
    13.         page: 1,
    14.         total: 0,
    15.  
    16.       }
    17.     },
    18.     methods: {
    19.       //封装查询方法
    20.       list(params) {
    21.         let url = this.axios.urls.BOOK_LIST;
    22.         this.axios.get(url, {
    23.           params: params
    24.         }).then(r => {
    25.           console.log(r)
    26.           this.tableData = r.data.rows
    27.           this.total = r.data.total
    28.         }).catch(e => {
    29.  
    30.         })
    31.       },
    32.       //模糊查询方法
    33.       query() {
    34.         let params = {
    35.           bookname: this.bookname
    36.         }
    37.         this.list(params)
    38.       },
    39.       //当页发生变化会触发
    40.       handleSizeChange(r) {
    41.         let params = {
    42.           bookname: this.bookname,
    43.           rows: this.rows,
    44.           rows: r
    45.         }
    46.         this.list(params)
    47.       },
    48.       //当前页数发生变化会触发
    49.       handleCurrentChange(p) {
    50.         let params = {
    51.           bookname: this.bookname,
    52.           rows: this.rows,
    53.           page: p
    54.         }
    55.         this.list(params)
    56.       }
    57.  
    58.     },
    59.     created() {
    60.       //加载页面先去后端拿数据
    61.       let params = {
    62.         bookname: this.bookname
    63.       }
    64.       this.list()
    65.  
    66.     }
    67.  
    68.   }
    69. script>
    70.  
    71.  
    72.  
    73. <style>
    74.   .el-table .warning-row {
    75.     background: oldlace;
    76.   }
    77.  
    78.   .el-table .success-row {
    79.     background: #f0f9eb;
    80.   }
    81. style>

    2.2.新增功能

    1)在action.js配置我们的后端接口

    'BOOK_ADD': '/book/addBook', //书籍新增

    2）新增一个新增按钮

      "primary" icon="el-icon-search" @click="add()">新增

    3）根据资料查找相应代码进行修改

     这个是我找的素材仅供大家参考

    1. "title" :visible.sync="dialogFormVisible" @close="dialogClose">
    2.     
    3.     <el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
    4.     ...
    5.     el-form>
    6.     <div slot="footer" class="dialog-footer">
    7. 		<el-button type="danger" @click="dialogFormVisible = false" icon="el-icon-close">取 消el-button>
    8. 		<el-button type="primary" @click="doSubmit" icon="el-icon-edit-outline">保 存el-button>
    9. 	div>
    11.  
    12. <script>
    13. 	export default {
    14.         name:"BookList",
    15.         data:function(){
    16.             return {
    17.                 dialogFormVisible:false,   //是否显现对话框
    18.             }
    19.         },
    20.         methods:{
    21.             //关闭对话框时触发的事件
    22.             dialogClose(){
    23.                 
    24.             }
    25.         }
    26.     }
    27. script>

     我们将上面的代码进行修改得到了下面的结果

    1.  "title" :visible.sync="dialogFormVisible" @close="clear">
    2.       <el-form :model="book">
    3.         <el-form-item label="书籍ID" :label-width="formLabelWidth" v-show="hidden">
    4.           <el-input v-model="book.id" autocomplete="off">el-input>
    5.         el-form-item>
    6.         <el-form-item label="书籍名称" :label-width="formLabelWidth">
    7.           <el-input v-model="book.bookname" autocomplete="off">el-input>
    8.         el-form-item>
    9.         <el-form-item label="书籍价格" :label-width="formLabelWidth">
    10.           <el-input v-model="book.price" autocomplete="off">el-input>
    11.         el-form-item>
    12.         <el-form-item label="书籍类型" :label-width="formLabelWidth">
    13.           <el-select v-model="book.booktype" placeholder="请选择书籍类型">
    14.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="t.id">el-option>
    15.           el-select>
    16.         el-form-item>
    17.       el-form>
    18.       <div slot="footer" class="dialog-footer">
    19.         <el-button @click="dialogFormVisible = false">取 消el-button>
    20.         <el-button type="primary" @click="dosub">确 定el-button>
    21.       div>
    22.

    在data中定义变量

    1.     data() {
    2.       return {
    3.         bookname: "",
    4.         tableData: [],
    5.         rows: 10,
    6.         page: 1,
    7.         total: 0,
    8.         title: "新增窗口",//对话框标题
    9.         dialogFormVisible: false,//对话框是否显示
    10.         book: {
    11.           id: null,
    12.           bookname: null,
    13.           price: '',
    14.           booktype: null
    15.         },//书籍字段
    16.         formLabelWidth:'100px',
    17.         types:[],//书籍类别
    18.         hidden:false//id输入框是否隐藏
    19.       }
    20.     }

    在methods中定义方法

    1. //提交新增/修改表单
    2.       dosub(){
    3.         let url = this.axios.urls.BOOK_ADD;
    4.         if(this.title=="编辑窗口"){
    5.           url=this.axios.urls.BOOK_EDIT;
    6.         }
    7.         let params = {
    8.          id: this.book.id,
    9.          bookname: this.book.bookname,
    10.          price: this.book.price,
    11.          booktype: this.book.booktype
    12.         }
    13.         this.axios.post(url,params).then(r => {
    14.            if (r.data.success) {
    15.              this.$message({
    16.                message: r.data.msg,
    17.                type: 'success'
    18.              });
    19.              this.clear()
    20.              this.query()
    21.            } else {
    22.              this.$message.error(r.data.msg);
    23.            }
    24.  
    25.         }).catch(e => {
    26.  
    27.         })
    28.       },
    29.       //关闭对话框
    30.       clear(){
    31.         this.title= "新增窗口",
    32.         this.dialogFormVisible=false,
    33.         this.book={
    34.           id: null,
    35.           bookname: null,
    36.           price: '',
    37.           booktype: null
    38.         }
    39.       },
    40.       //打开对话框
    41.       open(){
    42.         this.dialogFormVisible=true;
    43.       }

    在created中获取书本类型（这里我就做个假数据模拟一下）

    1.     created() {
    2.       this.list()
    3.       this.types=[{
    4.         id:1,
    5.         name:"爽文"
    6.       },{
    7.         id:2,
    8.         name:"爱情"
    9.       },{
    10.         id:3,
    11.         name:"谍战"
    12.       },{
    13.         id:4,
    14.         name:"古装"
    15.       }]
    16.     }

     效果演示：

    2.3.修改功能

    新增完成了修改功能还远吗？还是一样的套路先去定义后端接口再去ELement找模板修改编写需求

    1)在action.js配置我们的后端接口

    'BOOK_EDIT': '/book/editBook', //书籍修改

    2）根据资料查找相应代码进行修改

     这个是我找的素材仅供大家参考

    1. "操作">
    2.       <template slot-scope="scope">
    3.         <el-button
    4.           size="mini"
    5.           @click="handleEdit(scope.$index, scope.row)">编辑el-button>
    6.         <el-button
    7.           size="mini"
    8.           type="danger"
    9.           @click="handleDelete(scope.$index, scope.row)">删除el-button>
    10.       template>
    11.

    scope 是插槽的作用域对象，它包含了当前循环项的相关信息。通常情况下，scope 对象会包含以下属性：

    • scope.$index：当前循环项的索引值。
    • scope.row：当前循环项的数据对象。

    通过使用 scope.$index，我们可以获取当前循环项在数组中的索引位置，以便进行相应的操作。而 scope.row 则代表当前循环项的具体数据对象，可以用于显示或修改数据。

     我们将上面的代码进行修改得到了下面的结果

    1. "操作">
    2.         <template slot-scope="scope">
    3.           <el-button size="mini" @click="open(scope.$index, scope.row)">编辑el-button>
    4.           <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除el-button>
    5.         template>
    6.

    在methods中迭代定义open方法

    1. open(idx,row) {
    2.         this.dialogFormVisible = true;
    3.         //只有编辑row才不为空
    4.         if(row!=null){
    5.           this.title="编辑窗口";
    6.           this.book.id=row.id;
    7.           this.book.bookname=row.bookname;
    8.           this.book.price=row.price;
    9.           this.book.booktype=row.booktype;
    10.         }
    11.       }

     效果演示：

    2.4.删除功能

    轻车熟路，我们删除肯定需要有一个确认的操作所以需要找一个确认消息框

    1)在action.js配置我们的后端接口

    'BOOK_DEL': '/book/delBook', //书籍删除

    2）根据资料查找相应代码进行修改

     这个是我找的素材仅供大家参考

    1.  open() {
    2.         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    3.           confirmButtonText: '确定',
    4.           cancelButtonText: '取消',
    5.           type: 'warning'
    6.         }).then(() => {
    7.           this.$message({
    8.             type: 'success',
    9.             message: '删除成功!'
    10.           });
    11.         }).catch(() => {
    12.           this.$message({
    13.             type: 'info',
    14.             message: '已取消删除'
    15.           });          
    16.         });
    17.       }

     我们只需要将原本我们表格内的删除方法换成以上的代码加以修改即可

    在methods中定义方法

    1.   //删除数据
    2.       del(idx, row) {
    3.         this.$confirm('此操作将删除书籍为《'+row.bookname+'》的数据, 是否继续?', '提示', {
    4.             confirmButtonText: '确定',
    5.             cancelButtonText: '取消',
    6.             type: 'warning'
    7.           }).then(() => {
    8.             let url = this.axios.urls.BOOK_DEL;
    9.           this.axios.post(url, {id:row.id}).then(r => {
    10.             if (r.data.success) {
    11.               this.$message({
    12.                 message: r.data.msg,
    13.                 type: 'success'
    14.               });
    15.               this.clear()
    16.               this.query()
    17.             } else {
    18.               this.$message.error(r.data.msg);
    19.             }
    20.  
    21.           }).catch(e => {
    22.  
    23.           })
    24.         }).catch(() => {
    25.           this.$message({
    26.             type: 'info',
    27.             message: '已取消删除'
    28.           });
    29.         });
    30.       }

    效果演示：

    看到这里我们的增删改查都已完成了是不是非常的丝滑呢？看完先别走，还有后续，我们增删改查看似没错，但是我们如果提交的是空的数据会有什么印象呢？我们的后端会报空指针异常，所以针对这个问题，我们还要进一步优化——>表单验证 

    三、表单验证 

    首先给大家把错误演示出来

    其实ELement也早就想到了这个问题，我们直接“套娃”即可。

    查看完官方文档后，我们得知只需要做以下几件事：

    ①指定表单规则:rules="rules"

    ②指定验证表单对象ref="book"（必须和:model="book"一致）

    ③为字段设置prop进行校验

    ④定义表单验证规则

    ⑤使用规则

    添加表单验证后的代码

    1.     "title" :visible.sync="dialogFormVisible" @close="clear">
    2.       <el-form :model="book" :rules="rules" ref="book">
    3.         <el-form-item label="书籍ID" :label-width="formLabelWidth" v-show="hidden">
    4.           <el-input v-model="book.id" autocomplete="off">el-input>
    5.         el-form-item>
    6.         <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
    7.           <el-input v-model="book.bookname" autocomplete="off">el-input>
    8.         el-form-item>
    9.         <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
    10.           <el-input v-model="book.price" autocomplete="off">el-input>
    11.         el-form-item>
    12.         <el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype">
    13.           <el-select v-model="book.booktype" placeholder="请选择书籍类型">
    14.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="t.id">el-option>
    15.           el-select>
    16.         el-form-item>
    17.       el-form>
    18.       <div slot="footer" class="dialog-footer">
    19.         <el-button @click="dialogFormVisible = false">取 消el-button>
    20.         <el-button type="primary" @click="dosub">确 定el-button>
    21.       div>
    22.

    表单规则： 

    1.         rules:{
    2.           bookname: [{
    3.               required: true,
    4.               message: '请输入书籍名称',
    5.               trigger: 'blur'
    6.             },
    7.             {
    8.               min: 1,
    9.               max: 10,
    10.               message: '长度在 1 到 10 个字符',
    11.               trigger: 'blur'
    12.             }
    13.           ],
    14.           price: [{
    15.             required: true,
    16.             message: '请输入价格',
    17.             trigger: 'blur'
    18.           }],
    19.           booktype: [{
    20.             required: true,
    21.             message: '请输入书籍类别',
    22.             trigger: 'blur'
    23.           }]
    24.         }

    在提交表单之前使用规则 

    1. dosub() {
    2.               this.$refs['book'].validate((valid) => {
    3.                   if (valid) {
    4.                     let url = this.axios.urls.BOOK_ADD;
    5.                     if (this.title == "编辑窗口") {
    6.                       url = this.axios.urls.BOOK_EDIT;
    7.                     }
    8.                     let params = {
    9.                       id: this.book.id,
    10.                       bookname: this.book.bookname,
    11.                       price: this.book.price,
    12.                       booktype: this.book.booktype
    13.                     }
    14.                     this.axios.post(url, params).then(r => {
    15.                       if (r.data.success) {
    16.                         this.$message({
    17.                           message: r.data.msg,
    18.                           type: 'success'
    19.                         });
    20.                         this.clear()
    21.                         this.query()
    22.                       } else {
    23.                         this.$message.error(r.data.msg);
    24.                       }
    25.  
    26.                     }).catch(e => {
    27.  
    28.                     })
    29.                   } else {
    30.                     console.log('error submit!!');
    31.                     return false;
    32.                   }
    33.                 });
    34.       }

    效果演示 ：

    如果一个字段中有多个规则，不满其中一个都会拦截提交！！

    请添加图片描述

    到这里我的分享就结束了，欢迎到评论区探讨交流！！

    💖如果觉得有用的话还请点个赞吧 💖

  • 相关阅读:
    图论（欧拉路径）
    重生之初识svelte框架（1）
    将法律条文很美观的复制到word上
    关卡二：基于ECharts数据可视化项目
    [附源码]计算机毕业设计软考刷题小程序Springboot程序
    译：零信任对 Kubernetes 意味着什么
    elasticsearch 7.X全部版本的新特性与重大变化
    海外服务器相较于国内服务器有何特点？亚马逊海外服务器为何零跑全球
    LTE小区搜索过程及SCH/BCH设计
    Mybatis分页框架-PageHelper
  • 原文地址：https://blog.csdn.net/weixin_74318097/article/details/133343350