• ElementUI之CUD+表单验证

                                                      🎬 艳艳耶✌️：个人主页

                                                      🔥 个人专栏 ：《Spring与Mybatis集成整合》《Vue.js使用》

                                                       ⛺️ 生活的理想，为了不断更新自己 !

    1.前言

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

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

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

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

    2.增删改查案例

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

    1. <template>
    2.   <div class="books" style="padding: 20px;">
    3.     <!-- 1.搜索框 -->
    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.         <el-button type="primary" @click="open">新增</el-button>
    11.       </el-form-item>
    12.     </el-form>
    13.     <!-- 2.表格 -->
    14.     <el-table :data="tableData" style="width: 100%">
    15.       <el-table-column prop="id" label="书籍ID" width="180">
    16.       </el-table-column>
    17.       <el-table-column prop="bookname" label="书籍名称" width="180">
    18.       </el-table-column>
    19.       <el-table-column prop="price" label="书籍价格" width="180">
    20.       </el-table-column>
    21.       <el-table-column prop="booktype" label="书籍类型" width="180">
    22.       </el-table-column>
    23.       <el-table-column label="操作">
    24.         <template slot-scope="scope">
    25.           <el-button size="mini" @click="open(scope.$index,scope.row)">编辑</el-button>
    26.           <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
    27.         </template>
    28.       </el-table-column>
    29.     </el-table>
    30.     <!-- 3.分页条 -->
    31.     <div class="block">
    32.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    33.         :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
    34.       </el-pagination>
    35.     </div>
    36.     <!-- 4.多功能弹出框 -->
    37.     <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="clear">
    38.       <el-form :model="book">
    39.         <el-form-item label="书籍ID" :label-width="formLabelWidth">
    40.           <el-input v-model="book.id" autocomplete="off"></el-input>
    41.         </el-form-item>
    42.         <el-form-item label="书籍名称" :label-width="formLabelWidth">
    43.           <el-input v-model="book.bookname" autocomplete="off"></el-input>
    44.         </el-form-item>
    45.         <el-form-item label="书籍价格" :label-width="formLabelWidth">
    46.           <el-input v-model="book.price" autocomplete="off"></el-input>
    47.         </el-form-item>
    48.         <el-form-item label="书籍类别" :label-width="formLabelWidth">
    49.           <el-select v-model="book.booktype" placeholder="请选择书籍类型">
    50.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
    51.           </el-select>
    52.         </el-form-item>
    53.       </el-form>
    54.       <div slot="footer" class="dialog-footer">
    55.         <el-button @click="dialogFormVisible = false">取 消</el-button>
    56.         <el-button type="primary" @click="dosub">确 定</el-button>
    57.       </div>
    58.     </el-dialog>
    59.   </div>
    60. </template>
    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.         // 默认不展示窗口
    72.         dialogFormVisible: false,
    73.         formLabelWidth: "100px", //宽度
    74.         types: [],
    75.         book: {
    76.           id: "",
    77.           bookname: "",
    78.           price: "",
    79.           booktype: ""
    80.         }
    81.       }
    82.     },
    83.     methods: {
    84.       //删除
    85.       del(row) {
    86.         this.$confirm('你确定要删除该数据嘛~亲?', '提示', {
    87.           confirmButtonText: '确定',
    88.           cancelButtonText: '取消',
    89.           type: 'warning'
    90.         }).then(() => {
    91.           let url = this.axios.urls.Book_DEL;
    92.           this.axios.post(url, {id:row.id}).then(r => {
    93.             console.info(r);
    94.             //弹出框
    95.             this.$message({
    96.               type: 'success',
    97.               message: '删除成功!'
    98.             });
    99.  
    100.             this.query({});
    101.           }).catch(e => {})
    102.  
    103.         }).catch(() => {
    104.           this.$message({
    105.             type: 'info',
    106.             message: '已取消删除'
    107.           });
    108.         });
    109.       },
    110.       dosub() {
    111.         //新增
    112.         //路由
    113.         let url = this.axios.urls.Book_ADD;
    114.         if (this.title == '编辑界面') {
    115.           url = this.axios.urls.Book_UPD;
    116.         }
    117.         let params = {
    118.           id: this.book.id,
    119.           bookname: this.book.bookname,
    120.           price: this.book.price,
    121.           booktype: this.book.booktype
    122.         };
    123.         console.info(params);
    124.         console.info(url);
    125.         this.axios.post(url, params).then(r => {
    126.           console.info(r);
    127.           this.clear();
    128.           this.query({});
    129.         }).catch(e => {
    130.         })
    131.       },
    132.       clear() {
    133.         //初始化窗体
    134.         this.dialogFormVisible = false;
    135.         this.title = '新增界面';
    136.         this.book = {
    137.           id: "",
    138.           bookname: "",
    139.           price: "",
    140.           booktype: ""
    141.         }
    142.       },
    143.       open(index,row) {
    144.         //打开窗口
    145.         this.dialogFormVisible = true;
    146.         if (row) {
    147.           this.title = '编辑界面';
    148.           //赋值
    149.           this.book.id = row.id;
    150.           this.book.bookname = row.bookname;
    151.           this.book.price = row.price;
    152.           this.book.booktype = row.booktype;
    153.  
    154.         }
    155.       },
    156.       query(params) {
    157.         //路由
    158.         let url = this.axios.urls.Book_LIST;
    159.         this.axios.get(url, {
    160.           params: params
    161.         }).then(r => {
    162.           console.info(r);
    163.           this.tableData = r.data.rows;
    164.           this.total = r.data.total;
    165.         }).catch(e => {
    166.  
    167.         })
    168.       },
    169.       onSubmit() {
    170.         //模糊查询的字段
    171.         let params = {
    172.           bookname: this.bookname
    173.         }
    174.         this.query(params);
    175.       },
    176.       handleSizeChange(r) {
    177.         // 当页大小发生变化
    178.  
    179.         let params = {
    180.           bookname: this.bookname,
    181.           rows: r,
    182.           page: this.page
    183.         }
    184.         this.query(params);
    185.       },
    186.       handleCurrentChange(p) {
    187.         // 当前页码发生变化
    188.         let params = {
    189.           bookname: this.bookname,
    190.           rows: this.rows,
    191.           page: p
    192.         }
    193.         this.query(params);
    194.       }
    195.  
    196.     },
    197.     created() {
    198.       this.query({});
    199.       //需要发ajax请求后台数据，在这里我给它定死了
    200.       this.types = [{
    201.         id: 1,
    202.         name: '短文'
    203.       }, {
    204.         id: 2,
    205.         name: '爱情'
    206.       }, {
    207.         id: 3,
    208.         name: '爽文'
    209.       }]
    210.     }
    211.   }
    212. </script>

    效果展示：

    3.表单验证

    3.1 设置表单验证属性

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

    BookList

    1. <template>
    2.   <div class="books" style="padding: 20px;">
    3.     <!-- 1.搜索框 -->
    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.         <el-button type="primary" @click="open">新增</el-button>
    11.       </el-form-item>
    12.     </el-form>
    13.     <!-- 2.表格 -->
    14.     <el-table :data="tableData" style="width: 100%">
    15.       <el-table-column prop="id" label="书籍ID" width="180">
    16.       </el-table-column>
    17.       <el-table-column prop="bookname" label="书籍名称" width="180">
    18.       </el-table-column>
    19.       <el-table-column prop="price" label="书籍价格" width="180">
    20.       </el-table-column>
    21.       <el-table-column prop="booktype" label="书籍类型" width="180">
    22.       </el-table-column>
    23.       <el-table-column label="操作">
    24.         <template slot-scope="scope">
    25.           <el-button size="mini" @click="open(scope.$index,scope.row)">编辑</el-button>
    26.           <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
    27.         </template>
    28.       </el-table-column>
    29.     </el-table>
    30.     <!-- 3.分页条 -->
    31.     <div class="block">
    32.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    33.         :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
    34.       </el-pagination>
    35.     </div>
    36.     <!-- 4.多功能弹出框 -->
    37.     <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="clear">
    38.       <el-form :model="book" :rules="rules" ref="book">>
    39.         <el-form-item label="书籍ID" :label-width="formLabelWidth" >
    40.           <el-input v-model="book.id" autocomplete="off"
    41.           ></el-input>
    42.         </el-form-item>
    43.         <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
    44.           <el-input v-model="book.bookname" autocomplete="off":rules="rules" ref="book"></el-input>
    45.         </el-form-item>
    46.         <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
    47.           <el-input v-model="book.price" autocomplete="off" :rules="rules" ref="book"></el-input>
    48.         </el-form-item>
    49.         <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype">
    50.           <el-select v-model="book.booktype" placeholder="请选择书籍类型">
    51.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
    52.           </el-select>
    53.         </el-form-item>
    54.       </el-form>
    55.       <div slot="footer" class="dialog-footer">
    56.         <el-button @click="dialogFormVisible = false">取 消</el-button>
    57.         <el-button type="primary" @click="dosub">确 定</el-button>
    58.       </div>
    59.     </el-dialog>
    60.   </div>
    61. </template>
    62. <script>
    63. import { valid } from 'semver';
    64.   export default {
    65.     data() {
    66.           return {
    67.             bookname: '',
    68.             tableData: [],
    69.             rows: 10,
    70.             total: 0,
    71.             page: 1,
    72.             formLabelWidth: '120px', //弹出窗输入框前的文字宽度
    73.             title: '书籍新增', //弹出窗标题
    74.             dialogFormVisible: false, //默认关闭
    75.             book: {
    76.               id: '',
    77.               bookname: '',
    78.               price: '',
    79.               booktype: ''
    80.             },
    81.             types: [],
    82.             //增加表单验证
    83.             rules: {
    84.               bookname: [{
    85.                   required: true,
    86.                   message: '请输入书籍的名称',
    87.                   trigger: 'blur'
    88.                 },
    89.                 {
    90.                   min: 2,
    91.                   max: 10,
    92.                   message: '书籍名称长度在 2 到 10 个字符',
    93.                   trigger: 'blur'
    94.                 }
    95.               ],
    96.               price: [{
    97.                 required: true,
    98.                 message: '请填写书籍价格',
    99.                 trigger: 'blur'
    100.               }],
    101.               booktype: [{
    102.                 required: true,
    103.                 message: '请选择书籍类型',
    104.                 trigger: 'blur'
    105.               }]
    106.             }
    107.           }
    108.         },
    109.     methods: {
    110.       //删除
    111.       del(row) {
    112.         this.$confirm('你确定要删除该数据嘛~亲?', '提示', {
    113.           confirmButtonText: '确定',
    114.           cancelButtonText: '取消',
    115.           type: 'warning'
    116.         }).then(() => {
    117.           let url = this.axios.urls.Book_DEL;
    118.           this.axios.post(url, {id:row.id}).then(r => {
    119.             console.info(r);
    120.             //弹出框
    121.             this.$message({
    122.               type: 'success',
    123.               message: '删除成功!'
    124.             });
    125.  
    126.             this.query({});
    127.           }).catch(e => {})
    128.  
    129.         }).catch(() => {
    130.           this.$message({
    131.             type: 'info',
    132.             message: '已取消删除'
    133.           });
    134.         });
    135.       },
    136.       dosub() {
    137.         //新增
    138.         //路由
    139.          this.$refs['book'].validate((valid) => {
    140.          if (valid) {
    141.         let url = this.axios.urls.Book_ADD;
    142.         if (this.title == '编辑界面') {
    143.           url = this.axios.urls.Book_UPD;
    144.         }
    145.         let params = {
    146.           id: this.book.id,
    147.           bookname: this.book.bookname,
    148.           price: this.book.price,
    149.           booktype: this.book.booktype
    150.         };
    151.         console.info(params);
    152.         console.info(url);
    153.         this.axios.post(url, params).then(r => {
    154.           console.info(r);
    155.           this.clear();
    156.           this.query({});
    157.         }).catch(e => {
    158.         })
    159.         }else {
    160.             console.log('error submit!!');
    161.             return false;
    162.           }
    163.           })
    164.       },
    165.       clear() {
    166.         //初始化窗体
    167.         this.dialogFormVisible = false;
    168.         this.title = '新增界面';
    169.         this.book = {
    170.           id: "",
    171.           bookname: "",
    172.           price: "",
    173.           booktype: ""
    174.         }
    175.       },
    176.       open(index,row) {
    177.         //打开窗口
    178.         this.dialogFormVisible = true;
    179.         if (row) {
    180.           this.title = '编辑界面';
    181.           //赋值
    182.           this.book.id = row.id;
    183.           this.book.bookname = row.bookname;
    184.           this.book.price = row.price;
    185.           this.book.booktype = row.booktype;
    186.  
    187.         }
    188.       },
    189.       query(params) {
    190.         //路由
    191.         let url = this.axios.urls.Book_LIST;
    192.         this.axios.get(url, {
    193.           params: params
    194.         }).then(r => {
    195.           console.info(r);
    196.           this.tableData = r.data.rows;
    197.           this.total = r.data.total;
    198.         }).catch(e => {
    199.  
    200.         })
    201.       },
    202.       onSubmit() {
    203.         //模糊查询的字段
    204.         let params = {
    205.           bookname: this.bookname
    206.         }
    207.         this.query(params);
    208.       },
    209.       handleSizeChange(r) {
    210.         // 当页大小发生变化
    211.  
    212.         let params = {
    213.           bookname: this.bookname,
    214.           rows: r,
    215.           page: this.page
    216.         }
    217.         this.query(params);
    218.       },
    219.       handleCurrentChange(p) {
    220.         // 当前页码发生变化
    221.         let params = {
    222.           bookname: this.bookname,
    223.           rows: this.rows,
    224.           page: p
    225.         }
    226.         this.query(params);
    227.       }
    228.  
    229.     },
    230.     created() {
    231.       this.query({});
    232.       //需要发ajax请求后台数据，在这里我给它定死了
    233.       this.types = [{
    234.         id: 1,
    235.         name: '短文'
    236.       }, {
    237.         id: 2,
    238.         name: '爱情'
    239.       }, {
    240.         id: 3,
    241.         name: '爽文'
    242.       }]
    243.     }
    244.   }
    245. </script>

    效果展示：

                                                      今日分析就到这！！！！！

  • 相关阅读:
    stata17中java installation not found或java not recognozed的问题
    nginx 做转发处理，指定目录访问和tp同级的目录
    Vue中el-table条件渲染防止样式乱掉
    Oracle 11G 支持自增主键方法
    【Pytorch深度学习开发实践学习】【VGG】经典算法复现-Pytorch实现VGG主干网络（1）model.py
    本地开发申请ssl证书并在宝塔上给网站配置ssl
    责任链模式
    Python和PHP有什么区别
    前端工程化精讲第四课 接口调试：Mock 工具如何快速进行接口调试？
    客户心声 | 四川省人社厅杨玉成一行充分肯定桂溪街道劳动保障工作信息化建设平台
  • 原文地址：https://blog.csdn.net/2301_76988707/article/details/133344459