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

    1. <template>
    2.   <div class="books" style="padding: 20px;">
    3.     
    4.     <el-form :inline="true" class="demo-form-inline">
    5.       <el-form-item label="书籍名称">
    6.         <el-input v-model="bookname" placeholder="书籍名称">el-input>
    7.       el-form-item>
    8.       <el-form-item>
    9.         <el-button type="primary" @click="onSubmit">搜索el-button>
    10.         
    11.         <el-button type="primary" @click="open">新增el-button>
    12.       el-form-item>
    13.     el-form>
    14.     
    15.     <el-table :data="tableData" stripe style="width: 100%">
    16.       <el-table-column prop="id" label="书籍编号" width="180">
    17.       el-table-column>
    18.       <el-table-column prop="bookname" label="书籍名称" width="180">
    19.       el-table-column>
    20.       <el-table-column prop="price" label="书籍价格">
    21.       el-table-column>
    22.       <el-table-column prop="booktype" label="书籍类型">
    23.       el-table-column>
    24.     el-table>
    25.     
    26.     <div class="block" style="padding: 20px;">
    27.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    28.         :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
    29.         :total="total">
    30.       el-pagination>
    31.     div>
    32.     
    33.     <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear">
    34.       <el-form :model="book">
    35.         <el-form-item label="书籍编号" :label-width="formLabelWidth">
    36.           <el-input v-model="book.id" autocomplete="off">el-input>
    37.         el-form-item>
    38.         <el-form-item label="书籍名称" :label-width="formLabelWidth">
    39.           <el-input v-model="book.bookname" autocomplete="off">el-input>
    40.         el-form-item>
    41.         <el-form-item label="书籍价格" :label-width="formLabelWidth">
    42.           <el-input v-model="book.price" autocomplete="off">el-input>
    43.         el-form-item>
    44.         <el-form-item label="书籍类别" :label-width="formLabelWidth">
    45.           <el-select v-model="book.booktype" placeholder="请选择活动区域">
    46.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id">el-option>
    47.           el-select>
    48.         el-form-item>
    49.       el-form>
    50.       <div slot="footer" class="dialog-footer">
    51.         <el-button @click="dialogFormVisible = false">取 消el-button>
    52.         <el-button type="primary" @click="dosub">确 定el-button>
    53.       div>
    54.     el-dialog>
    55.  
    56.   div>
    57.  
    58.  
    59. template>
    60.  
    61. <script>
    62.   export default {
    63.     data() {
    64.       return {
    65.         bookname: '',
    66.         tableData: [],
    67.         rows: 10,
    68.         page: 1,
    69.         total: 0,
    70.         title: '新增窗体',
    71.         dialogFormVisible: false,
    72.         formLabelWidth: '100px',
    73.         book: {
    74.           id: '',
    75.           bookname: '',
    76.           price: '',
    77.           booktype: ''
    78.         },
    79.  
    80.         types: []
    81.  
    82.       }
    83.  
    84.     },
    85.     methods: {
    86.       // 提交
    87.       dosub(){
    88.         let url = this.axios.urls.Book_ADD;
    89.         if(this.title == '编辑窗体'){
    90.           url = this.axios.urls.Book_UPD;
    91.         }
    92.         let params = {
    93.           id:this.book.id,
    94.           bookname:this.book.bookname,
    95.           price:this.book.price,
    96.           booktype:this.book.booktype
    97.         }
    98.         this.axios.post(url, params).then(r => {
    99.           console.log(r);
    100.           this.clear();//关闭
    101.           this.query({});//刷新
    102.  
    103.         }).catch(e => {
    104.  
    105.         })
    106.       },
    107.       // 初始化窗体
    108.       clear() {
    109.         this.dialogFormVisible = false;
    110.         this.title='新增窗体';
    111.         this.book={
    112.           id: '',
    113.           bookname: '',
    114.           price: '',
    115.           booktype: ''
    116.         }
    117.       },
    118.       open() {
    119.         // 待开窗体
    120.         this.dialogFormVisible = true;
    121.  
    122.       },
    123.  
    124.       // 定义一个查询的方法，方便调用减少代码冗余
    125.       query(params) {
    126.         // 向后台请求数据的访问路径
    127.         let url = this.axios.urls.BookList;
    128.         this.axios.get(url, {
    129.           params: params
    130.         }).then(r => {
    131.           console.log(r);
    132.           this.tableData = r.data.rows;
    133.           this.total = r.data.total;
    134.         }).catch(e => {
    135.  
    136.         })
    137.       },
    138.       onSubmit() {
    139.         let params = {
    140.           bookname: this.bookname,
    141.  
    142.         }
    143.         // 调用查询方法
    144.         this.query(params);
    145.       },
    146.       handleSizeChange(r) { //当页大小发生变化
    147.         // 输出查看
    148.         console.log("当前页大小:" + r);
    149.         let params = {
    150.           bookname: this.bookname,
    151.           rows: r,
    152.           page: this.page
    153.         }
    154.         // 调用查询方法
    155.         this.query(params);
    156.       },
    157.       handleCurrentChange(p) { //当当前页页码大小发生变化
    158.         // 输出查看
    159.         console.log("当前页码:" + p);
    160.         let params = {
    161.           bookname: this.bookname,
    162.           page: p,
    163.           rows: this.rows
    164.         }
    165.         // 调用查询方法
    166.         this.query(params);
    167.       }
    168.     },
    169.     created() {
    170.  
    171.       // 调用查询方法
    172.       this.query({});
    173.       this.types = [{
    174.         id: 1,
    175.         name: '爱情'
    176.       }, {
    177.         id: 2,
    178.         name: '玄幻'
    179.       }, {
    180.         id: 3,
    181.         name: '激情'
    182.       }]
    183.     }
    184.   }
    185. script>
    186.  
    187. <style>
    188. style>

    注意事项：

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

    效果

     

    3. 编写编辑功能代码

    添加操作栏

    1. <el-table-column label="操作">
    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.       el-table-column>

    编写功能js代码

    效果展示

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

    删除功能的方法

    1. del(idx, row) {
    2.         this.$confirm('此操作将永久删除id为'+row.id+', 是否继续?', '提示', {
    3.           confirmButtonText: '确定',
    4.           cancelButtonText: '取消',
    5.           type: 'warning'
    6.         }).then(() => {
    7.            let url = this.axios.urls.Book_DEL;
    8.           this.axios.post(url, {id:row.id}).then(r => {
    9.             console.log(r);
    10.             this.$message({
    11.               type: 'success',
    12.               message: '删除成功!'
    13.             });
    14.             this.query({}); //刷新
    15.  
    16.           }).catch(e => {
    17.  
    18.           })
    19.  
    20.         }).catch(() => {
    21.           this.$message({
    22.             type: 'info',
    23.             message: '已取消删除'
    24.           });
    25.         });
    26.       },

     

     展示效果

    二、表单验证

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

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

     

    功能js编写

    规则
    1.  rules: {
    2.           bookname: [{
    3.               required: true,
    4.               message: '请输入书籍名称',
    5.               trigger: 'blur'
    6.             },
    7.             {
    8.               min: 3,
    9.               max: 5,
    10.               message: '长度在 1 到 9 个字符',
    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: 'change'
    23.           }]
    24.         }

     启用表单
    1. this.$refs[formName].validate((valid) => {
    2.           if (valid) {
    3.             alert('submit!');
    4.           } else {
    5.             console.log('error submit!!');
    6.             return false;
    7.           }
    8.         });

    效果

     

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

     

  • 相关阅读:
    S/4 HANA 大白话 - 财务会计-4 应付、应收账款
    仓库是时候实施物联网了吗
    深入react源码看setState究竟做了什么？
    为什么数据库不应该使用外键
    电源自动测试系统-DC/DC 电源自动测试系统NSAT-8000，免费看方案视频效果
    golang 多个struct 转换融合为一个json，平级融合或者多级融合
    java计算机毕业设计高校社团管理系统MyBatis+系统+LW文档+源码+调试部署
    xxl-job环境搭建详细
    Rust标准库-实现一个TCP服务、Rust使用套接字
    Javaweb-JSP详解Toretto
  • 原文地址：https://blog.csdn.net/weixin_74352229/article/details/133344786