• ElementUI之CUD+表单验证

    目录

    一、增删改功能实现

    1.1 代码编写

    1.2 效果演示

    二、表单验证

    2.1 加入表单验证指令

    2.2 配置表单验证规则

    2.3 编写验证规则

    2.4 使用规则

    2.5 效果展示

     

    以下代码基于上篇博客的基础进行优化，点此跳转进入：

    Kissship的博客——动态树+数据表格+分页https://blog.csdn.net/weixin_74263417/article/details/133320380?spm=1001.2014.3001.5502

    一、增删改功能实现

    1. Create（新增）：

      ElementUI 提供了多个用于数据新增的组件，包括表单（el-form）、输入框（el-input）、下拉选择框（el-select）等。您可以使用这些组件构建用于输入和提交新数据的表单界面。通常，您需要设置合适的表单验证规则（Validation Rules）来确保用户输入的数据有效。

    2. Update（更新）：

      要在 ElementUI 中执行数据更新操作，通常需要使用表格（el-table）或类似的列表组件来展示现有数据。用户可以在表格中选择要编辑的数据行，并通过弹出对话框或内联编辑单元格的方式来进行编辑。编辑完成后，需要触发更新操作将修改保存到后端服务器。

    3. Delete（删除）：

      删除数据通常涉及到确认删除的操作。ElementUI 提供了对话框组件（el-dialog）和确认框（el-messagebox）来处理删除确认。用户可以通过点击删除按钮触发删除操作，然后系统会提示用户确认删除。一旦用户确认删除，前端会向后端发送删除请求。

    1.1 代码编写

    在项目中的src文件下api中找到action.js进行配置数据访问的地址:

    1. /**
    2.  * 对后台请求的地址的封装，URL格式如下：
    3.  * 模块名_实体名_操作
    4.  */
    5. export default {
    6. 	'SERVER': 'http://localhost:8080/', //服务器
    7. 	'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆
    8. 	'SYSTEM_USER_DOREG': 'user/userRegister', //注册
    9.   'SYSTEM_MENUS': 'module/queryRootNode', //左侧菜单树
    10.   'BOOK_LIST': 'book/queryBookPager', //书籍列表
    11.   'BOOK_ADD': 'book/addBook', //书籍增加
    12.   'BOOK_UPD': 'book/editBook', //书籍修改
    13.   'BOOK_DEL': 'book/delBook', //书籍删除
    14. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    15. 		return this.SERVER + this[k];
    16. 	}
    17. }

    在BookList.vue组件中进行编写增加修改的代码：

    在ElementUI里面找到弹出窗进行编写增加修改的弹窗如下：

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

     在script标签中编写方法进行数据增加修改实现，在data中编写属性:

    1. data() {
    2.       return {
    3.         bookname: '',
    4.         tableData: [],
    5.         rows: 10,
    6.         page: 1,
    7.         total: 0,
    8.         title: '新增窗体',
    9.         dialogFormVisible: false,
    10.         formLabelWidth: '100px',
    11.         types: [],
    12.         form: {},
    13.         book: {
    14.           id: '',
    15.           bookname: '',
    16.           price: '',
    17.           booktype: ''
    18.         },
    19.       }
    20.     },

    在script标签中编写方法进行数据增加修改实现，在methods中编写方法:

    1. methods: {
    2.       del(idx, row) {
    3.         this.$confirm('此操作将永久删除id为' + row.id + '的数据, 是否继续?', '提示', {
    4.           confirmButtonText: '确定',
    5.           cancelButtonText: '取消',
    6.           type: 'warning'
    7.         }).then(() => {
    8.           let url = this.axios.urls.BOOK_DEL;
    9.           this.axios.post(url, {
    10.               id: row.id
    11.             })
    12.             .then(r => {
    13.               console.log(r);
    14.               this.$message({
    15.                 type: 'success',
    16.                 message: '删除成功!'
    17.               });
    18.               this.query({});
    19.             })
    20.             .catch(e => {
    21.               // 处理错误
    22.             });
    23.         }).catch(() => {
    24.           this.$message({
    25.             type: 'info',
    26.             message: '已取消删除'
    27.           });
    28.         });
    29.       },
    30.       dosub() {
    31.  
    32.         this.$refs['book'].validate((valid) => {
    33.           if (valid) {
    34.             let url = this.axios.urls.BOOK_ADD;
    35.             if (this.title == '编辑窗体') {
    36.               url = this.axios.urls.BOOK_UPD;
    37.             }
    38.             // 构建请求参数
    39.             let params = {
    40.               id: this.book.id,
    41.               bookname: this.book.bookname,
    42.               price: this.book.price,
    43.               booktype: this.book.booktype
    44.             };
    45.             console.log(params)
    46.             console.log(url)
    47.             this.axios.post(url, params)
    48.               .then(r => {
    49.                 console.log(r);
    50.                 // 编辑/添加操作成功后，再进行查询
    51.                 this.query({});
    52.                 this.clear();
    53.               })
    54.               .catch(e => {
    55.                 // 处理错误
    56.               });
    57.           } else {
    58.             console.log('error submit!!');
    59.             return false;
    60.           }
    61.         });
    62.       },
    63.       clear() {
    64.         // 初始化窗体
    65.         this.dialogFormVisible = false;
    66.         this.title = '新增窗体';
    67.  
    68.         // 清空表单
    69.         this.book = {
    70.           id: '',
    71.           bookname: '',
    72.           price: '',
    73.           booktype: ''
    74.         };
    75.       },
    76.  
    77.       // 打开窗体的方法
    78.       open(idx, row) {
    79.         // 打开编辑窗口
    80.         this.dialogFormVisible = true;
    81.         // 初始化标题
    82.         this.title = '新增窗体';
    83.         if (row != null) {
    84.           this.title = '编辑窗体';
    85.         }
    86.         // 如果有传入行数据，将其填充到表单字段中
    87.         if (row) {
    88.           this.book.id = row.id;
    89.           this.book.bookname = row.bookname;
    90.           this.book.price = row.price;
    91.           this.book.booktype = row.booktype;
    92.         }
    93.       },
    94.  
    95.  
    96.       query(params) {
    97.         let url = this.axios.urls.BOOK_LIST;
    98.         this.axios.get(url, {
    99.           params: params
    100.         }).then(r => {
    101.           console.log(r);
    102.           this.tableData = r.data.rows;
    103.           this.total = r.data.total;
    104.         }).catch(e => {
    105.  
    106.         })
    107.       },
    108.       onSubmit() {
    109.         let params = {
    110.           bookname: this.bookname
    111.         }
    112.         this.query(params);
    113.       },
    114.       handleSizeChange(r) {
    115.         //当页大小发生变化
    116.         console.log("当前页大小为：" + r);
    117.         let params = {
    118.           bookname: this.bookname,
    119.           rows: r,
    120.           page: this.page
    121.         }
    122.         this.query(params);
    123.       },
    124.       handleCurrentChange(p) {
    125.         //当前页码发生变化
    126.         console.log("当前页页码为：" + p);
    127.         let params = {
    128.           bookname: this.bookname,
    129.           rows: this.rows,
    130.           page: p
    131.         }
    132.         this.query(params);
    133.       }
    134.     },

    在created中初始化数据，如下：

    1. created() {
    2.       this.query({});
    3.       this.types = [{
    4.           id: 1,
    5.           name: "刘三金"
    6.         },
    7.         {
    8.           id: 2,
    9.           name: "小翰翰"
    10.         },
    11.         {
    12.           id: 3,
    13.           name: "老黑鬼"
    14.         },
    15.         {
    16.           id: 4,
    17.           name: "丧彪子"
    18.         },
    19.         {
    20.           id: 5,
    21.           name: "死浩子"
    22.         }
    23.       ];
    24.     }

    增加表格操作，如下：

    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="del(scope.$index, scope.row)">删除el-button>
    5.         template>
    6.       el-table-column>

    最后的完整代码如下：

    2.  
    3. <script>
    4.   import axios from 'axios';
    5.  
    6.   export default {
    7.     data() {
    8.       return {
    9.         bookname: '',
    10.         tableData: [],
    11.         rows: 10,
    12.         page: 1,
    13.         total: 0,
    14.         title: '新增窗体',
    15.         dialogFormVisible: false,
    16.         formLabelWidth: '100px',
    17.         types: [],
    18.         form: {},
    19.         book: {
    20.           id: '',
    21.           bookname: '',
    22.           price: '',
    23.           booktype: ''
    24.         },
    25.         rules: {
    26.           bookname: [{
    27.               required: true,
    28.               message: '请输入书籍名称',
    29.               trigger: 'blur'
    30.             },
    31.             {
    32.               min: 4,
    33.               max: 10,
    34.               message: '长度在 4 到 10 个字符',
    35.               trigger: 'blur'
    36.             }
    37.           ],
    38.           price: [{
    39.             required: true,
    40.             message: '请输入书籍价格',
    41.             trigger: 'blur'
    42.           }],
    43.           booktype: [{
    44.             required: true,
    45.             message: '请输入书籍类别',
    46.             trigger: 'blur'
    47.           }]
    48.         }
    49.       }
    50.     },
    51.     methods: {
    52.       del(idx, row) {
    53.         this.$confirm('此操作将永久删除id为' + row.id + '的数据, 是否继续?', '提示', {
    54.           confirmButtonText: '确定',
    55.           cancelButtonText: '取消',
    56.           type: 'warning'
    57.         }).then(() => {
    58.           let url = this.axios.urls.BOOK_DEL;
    59.           this.axios.post(url, {
    60.               id: row.id
    61.             })
    62.             .then(r => {
    63.               console.log(r);
    64.               this.$message({
    65.                 type: 'success',
    66.                 message: '删除成功!'
    67.               });
    68.               this.query({});
    69.             })
    70.             .catch(e => {
    71.               // 处理错误
    72.             });
    73.         }).catch(() => {
    74.           this.$message({
    75.             type: 'info',
    76.             message: '已取消删除'
    77.           });
    78.         });
    79.       },
    80.       dosub() {
    81.  
    82.         this.$refs['book'].validate((valid) => {
    83.           if (valid) {
    84.             let url = this.axios.urls.BOOK_ADD;
    85.             if (this.title == '编辑窗体') {
    86.               url = this.axios.urls.BOOK_UPD;
    87.             }
    88.             // 构建请求参数
    89.             let params = {
    90.               id: this.book.id,
    91.               bookname: this.book.bookname,
    92.               price: this.book.price,
    93.               booktype: this.book.booktype
    94.             };
    95.             console.log(params)
    96.             console.log(url)
    97.             this.axios.post(url, params)
    98.               .then(r => {
    99.                 console.log(r);
    100.                 // 编辑/添加操作成功后，再进行查询
    101.                 this.query({});
    102.                 this.clear();
    103.               })
    104.               .catch(e => {
    105.                 // 处理错误
    106.               });
    107.           } else {
    108.             console.log('error submit!!');
    109.             return false;
    110.           }
    111.         });
    112.       },
    113.       clear() {
    114.         // 初始化窗体
    115.         this.dialogFormVisible = false;
    116.         this.title = '新增窗体';
    117.  
    118.         // 清空表单
    119.         this.book = {
    120.           id: '',
    121.           bookname: '',
    122.           price: '',
    123.           booktype: ''
    124.         };
    125.       },
    126.  
    127.       // 打开窗体的方法
    128.       open(idx, row) {
    129.         // 打开编辑窗口
    130.         this.dialogFormVisible = true;
    131.         // 初始化标题
    132.         this.title = '新增窗体';
    133.         if (row != null) {
    134.           this.title = '编辑窗体';
    135.         }
    136.         // 如果有传入行数据，将其填充到表单字段中
    137.         if (row) {
    138.           this.book.id = row.id;
    139.           this.book.bookname = row.bookname;
    140.           this.book.price = row.price;
    141.           this.book.booktype = row.booktype;
    142.         }
    143.       },
    144.  
    145.  
    146.       query(params) {
    147.         let url = this.axios.urls.BOOK_LIST;
    148.         this.axios.get(url, {
    149.           params: params
    150.         }).then(r => {
    151.           console.log(r);
    152.           this.tableData = r.data.rows;
    153.           this.total = r.data.total;
    154.         }).catch(e => {
    155.  
    156.         })
    157.       },
    158.       onSubmit() {
    159.         let params = {
    160.           bookname: this.bookname
    161.         }
    162.         this.query(params);
    163.       },
    164.       handleSizeChange(r) {
    165.         //当页大小发生变化
    166.         console.log("当前页大小为：" + r);
    167.         let params = {
    168.           bookname: this.bookname,
    169.           rows: r,
    170.           page: this.page
    171.         }
    172.         this.query(params);
    173.       },
    174.       handleCurrentChange(p) {
    175.         //当前页码发生变化
    176.         console.log("当前页页码为：" + p);
    177.         let params = {
    178.           bookname: this.bookname,
    179.           rows: this.rows,
    180.           page: p
    181.         }
    182.         this.query(params);
    183.       }
    184.     },
    185.     created() {
    186.       this.query({});
    187.       this.types = [{
    188.           id: 1,
    189.           name: "刘三金"
    190.         },
    191.         {
    192.           id: 2,
    193.           name: "小翰翰"
    194.         },
    195.         {
    196.           id: 3,
    197.           name: "老黑鬼"
    198.         },
    199.         {
    200.           id: 4,
    201.           name: "丧彪子"
    202.         },
    203.         {
    204.           id: 5,
    205.           name: "死浩子"
    206.         }
    207.       ];
    208.     }
    209.   }
    210. script>
    211.  
    212. <style>
    213. style>

    1.2 效果演示

    新增效果演示：

    f23cc71065cb408b85857ebe527a9637.gif

    修改效果演示：

    dcf68a7478534fc5a6582e186133bf9c.gif

    删除效果演示：

    dc0d664fab9b44d6858e51cd51907866.gif

    二、表单验证

    2.1 加入表单验证指令

    :rules="rules" ref="book"

    解释： 

    • :rules 是用于表单验证的一个 Vue.js 指令。它通常用于表单元素，例如  或  组件，以定义验证规则。这些验证规则用于验证用户输入的数据是否符合预期的格式或要求。

    2.2 配置表单验证规则

    加入prop属性，如下：

    6c4a49314859470092c187d07bfe6020.png

    prop="id"

    具体来说，prop 属性用于指定要验证的表单项的属性名称。在这里，每个 对应一个表单字段（如书籍编号、书籍名称、书籍价格、书籍类别），prop 属性用于定义每个字段应该验证的属性名称。

    1. 例如，对于书籍编号，prop="id" 表示该表单项验证的是 book 对象中的 id 属性。类似地，prop="bookname" 表示验证 book 对象中的 bookname 属性，prop="price" 表示验证 book 对象中的 price 属性，而 prop="booktype" 表示验证 book 对象中的 booktype 属性。
    2. 这些 prop 属性将与 :model 属性一起使用，:model 属性指定了表单项的数据模型，即要验证的对象。同时，rules 属性通常也会提供相应的验证规则。

    在 Vue.js 和 Element UI 中，这种方式可以方便地实现表单验证，确保用户在提交表单时输入有效的数据。

    2.3 编写验证规则

    如下：

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

    2.4 使用规则

    1. this.$refs['book'].validate((valid) => {
    2.           if (valid) {
    3.             let url = this.axios.urls.BOOK_ADD;
    4.             if (this.title == '编辑窗体') {
    5.               url = this.axios.urls.BOOK_UPD;
    6.             }
    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.             console.log(params)
    15.             console.log(url)
    16.             this.axios.post(url, params)
    17.               .then(r => {
    18.                 console.log(r);
    19.                 // 编辑/添加操作成功后，再进行查询
    20.                 this.query({});
    21.                 this.clear();
    22.               })
    23.               .catch(e => {
    24.                 // 处理错误
    25.               });
    26.           } else {
    27.             console.log('error submit!!');
    28.             return false;
    29.           }
    30.         });

    2.5 效果展示

    c3fc25f83d614f72a3c7d55051a57db6.gif

    最后使用ElementUI之CUD+表单验证就到这里，祝大家在敲代码的路上一路通畅!

    感谢大家的观看 !

    4d34065529a34322a6311675d434a469.png

     

  • 相关阅读:
    vim 编辑器使用学习
    Linux进程基础（一）
    利用大数据和API优化电商决策：商品性能分析实践
    GPT4科研实践技术与AI绘图
    月报总结｜Moonbeam 7月份大事一览
    Eclipse Theia技术揭秘——初识Theia
    【全网最详细】最全java面试题及答案（210道）
    赛博斗地主——使用大语言模型扮演Agent智能体玩牌类游戏。
    Laravel安装Passport,安装laravel-permission报错max key length
    洞态在某互联⽹⾦融科技企业的最佳落地实践
  • 原文地址：https://blog.csdn.net/weixin_74263417/article/details/133344819