AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ElementUI之CUD+表单验证

2023-11-08 119
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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实现功能还是比较简单的，今天主要是围绕上篇内容进行增删改查操作，如果文中有不动的地方可以看看上一篇文章或是往期内容介绍，先看看我们目前的效果。

<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" style="width: 100%">
      <el-table-column prop="id" label="书籍ID" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书籍名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="书籍价格" width="180">
      </el-table-column>
      <el-table-column prop="booktype" label="书籍类型" width="180">
      </el-table-column>
      <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="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 3.分页条 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 4.多功能弹出框 -->
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book">
        <el-form-item label="书籍ID" :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", //宽度
        types: [],
        book: {
          id: "",
          bookname: "",
          price: "",
          booktype: ""
        }
      }
    },
    methods: {
      //删除
      del(row) {
        this.$confirm('你确定要删除该数据嘛~亲?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.Book_DEL;
          this.axios.post(url, {id:row.id}).then(r => {
            console.info(r);
            //弹出框
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.query({});
          }).catch(e => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      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
        };
        console.info(params);
        console.info(url);
        this.axios.post(url, params).then(r => {
          console.info(r);
          this.clear();
          this.query({});
        }).catch(e => {
        })
      },
      clear() {
        //初始化窗体
        this.dialogFormVisible = false;
        this.title = '新增界面';
        this.book = {
          id: "",
          bookname: "",
          price: "",
          booktype: ""
        }
      },
      open(index,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.Book_LIST;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.info(r);
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {
        })
      },
      onSubmit() {
        //模糊查询的字段
        let params = {
          bookname: this.bookname
        }
        this.query(params);
      },
      handleSizeChange(r) {
        // 当页大小发生变化
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        this.query(params);
      },
      handleCurrentChange(p) {
        // 当前页码发生变化
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        this.query(params);
      }
    },
    created() {
      this.query({});
      //需要发ajax请求后台数据，在这里我给它定死了
      this.types = [{
        id: 1,
        name: '短文'
      }, {
        id: 2,
        name: '爱情'
      }, {
        id: 3,
        name: '爽文'
      }]
    }
  }
</script>

效果展示：

3.表单验证

3.1 设置表单验证属性

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

BookList

<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" style="width: 100%">
      <el-table-column prop="id" label="书籍ID" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书籍名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="书籍价格" width="180">
      </el-table-column>
      <el-table-column prop="booktype" label="书籍类型" width="180">
      </el-table-column>
      <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="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 3.分页条 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 4.多功能弹出框 -->
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book" :rules="rules" ref="book">>
        <el-form-item label="书籍ID" :label-width="formLabelWidth" >
          <el-input v-model="book.id" autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
          <el-input v-model="book.bookname" autocomplete="off":rules="rules" ref="book"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="book.price" autocomplete="off" :rules="rules" ref="book"></el-input>
        </el-form-item>
        <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype">
          <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>
import { valid } from 'semver';
  export default {
    data() {
          return {
            bookname: '',
            tableData: [],
            rows: 10,
            total: 0,
            page: 1,
            formLabelWidth: '120px', //弹出窗输入框前的文字宽度
            title: '书籍新增', //弹出窗标题
            dialogFormVisible: false, //默认关闭
            book: {
              id: '',
              bookname: '',
              price: '',
              booktype: ''
            },
            types: [],
            //增加表单验证
            rules: {
              bookname: [{
                  required: true,
                  message: '请输入书籍的名称',
                  trigger: 'blur'
                },
                {
                  min: 2,
                  max: 10,
                  message: '书籍名称长度在 2 到 10 个字符',
                  trigger: 'blur'
                }
              ],
              price: [{
                required: true,
                message: '请填写书籍价格',
                trigger: 'blur'
              }],
              booktype: [{
                required: true,
                message: '请选择书籍类型',
                trigger: 'blur'
              }]
            }
          }
        },
    methods: {
      //删除
      del(row) {
        this.$confirm('你确定要删除该数据嘛~亲?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.Book_DEL;
          this.axios.post(url, {id:row.id}).then(r => {
            console.info(r);
            //弹出框
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.query({});
          }).catch(e => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      dosub() {
        //新增
        //路由
         this.$refs['book'].validate((valid) => {
         if (valid) {
        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
        };
        console.info(params);
        console.info(url);
        this.axios.post(url, params).then(r => {
          console.info(r);
          this.clear();
          this.query({});
        }).catch(e => {
        })
        }else {
            console.log('error submit!!');
            return false;
          }
          })
      },
      clear() {
        //初始化窗体
        this.dialogFormVisible = false;
        this.title = '新增界面';
        this.book = {
          id: "",
          bookname: "",
          price: "",
          booktype: ""
        }
      },
      open(index,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.Book_LIST;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.info(r);
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {
        })
      },
      onSubmit() {
        //模糊查询的字段
        let params = {
          bookname: this.bookname
        }
        this.query(params);
      },
      handleSizeChange(r) {
        // 当页大小发生变化
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        this.query(params);
      },
      handleCurrentChange(p) {
        // 当前页码发生变化
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        this.query(params);
      }
    },
    created() {
      this.query({});
      //需要发ajax请求后台数据，在这里我给它定死了
      this.types = [{
        id: 1,
        name: '短文'
      }, {
        id: 2,
        name: '爱情'
      }, {
        id: 3,
        name: '爽文'
      }]
    }
  }
</script>

效果展示：

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

文章标签：
JavaScript
前端开发
Java
Spring
数据库连接
艳艳耶
目录
相关文章
叫我默语
|
Java Maven
IDEA配置Maven教程
IDEA配置Maven教程
叫我默语
2998 0
李海滨
通过 ansible 创建 openstack 虚拟机并部署应用（实战篇）
前文 通过 ansible 创建 openstack 虚拟机并部署应用（配置篇） 接下来我们实战一下。 目录结构 ── ansible.cfg├── group_vars│ ├── all.yml├── openstack.
李海滨
5843 0
1387503158665997
|
监控 调度
页面迁移 【ChatGPT】
页面迁移 【ChatGPT】
1387503158665997
164 3
_揽
video-04-videojs配置及使用
video-04-videojs配置及使用
_揽
628 1
技术小达人
|
人工智能 人机交互 语音技术
INTERSPEECH2023论文解读｜BAT一种低延迟低内存消耗的RNN-T模型
INTERSPEECH2023论文解读｜BAT一种低延迟低内存消耗的RNN-T模型
技术小达人
587 0
优惠码发放
|
Web App开发 XML 测试技术
pytest进阶之html测试报告
pytest进阶之html测试报告前言　　Pytest系列已经写了几篇文章了，也不知道对多少人有帮助，总之对于我自己来说该掌握的都已经掌握了，那么今天我们再来说说pytest如何生成一个完整的html测试报告，让你在吹牛逼的路上再多一份资本！废话不多说，进入正题！（咋就莫名其妙想起这句话了呢， 估计看文章看多了，貌似挺多人用这句话过度……） 使用pytest-html插件生成测试报告 pytest-html生成报告pytest是借助pytest-html插件生成测试测试报告， 不用自己编写生成报告代码。
优惠码发放
4077 0
kissjz
|
机器学习/深度学习 Python
DC学院学习笔记（二十一）：用特征选择方法优化模型（二）
用特征选择方法优化模型：随机森林和L1正则化Lasso
kissjz
2464 0
祁同伟
|
存储 安全 云计算
徐徐落地 2009年云计算五大趋势盘点
本文讲的是徐徐落地 2009年云计算五大趋势盘点【IT168 专稿】IT领域从不缺乏概念。几年前才刚刚兴起的虚拟化技术，如今已经成为节约IT成本的灵丹妙药。而同样作为新兴概念的云计算，不论是专家还是媒体，都对其抱有极热烈的期待——以至有声音指责这是一种不负责任的炒作。
祁同伟
2650 0
2025「AI安全」全球攻防赛小编
|
3天前
|
人工智能 自然语言处理 安全
双第一！阿里云领跑安全运营智能体
喜报～
2025「AI安全」全球攻防赛小编
2047 7
2025「AI安全」全球攻防赛小编
|
2天前
|
云安全 人工智能 安全
AI被攻击怎么办？
阿里云提供 AI 全栈安全能力，其中对网络攻击的主动识别、智能阻断与快速响应构成其核心防线，依托原生安全防护为客户筑牢免疫屏障。
2025「AI安全」全球攻防赛小编
1562 3

热门文章

最新文章

  • 1
    深入解读：KubeVela 与 PaaS 有何不同？
  • 2
    阿里云率先达成国家绿色数据中心标准，平均PUE低于1.3
  • 3
    2022年l6月云大使返佣规则
  • 4
    nginx配置反向代理或跳转出现400问题处理记录
  • 5
    小尺度信道建模 | 带你读《大规模天线波束赋形技术原理与设计 》之二十六
  • 6
    阿里云ACP认证考试过关心得经验及考试费用详解
  • 7
    阿里云ECS服务器CentOS7上安装Apache服务
  • 8
    美国国家标准技术局发布应用容器安全指南  
  • 9
    MySQL多线程并发调优
  • 10
    两个INSERT发生死锁原因剖析
  • 1
    高级检索增强生成系统：LongRAG、Self-RAG 和 GraphRAG 的实现与选择
    29
  • 2
    《跨端互联进阶实践指南：从链路适配到长期效能的维护方案》
    26
  • 3
    《联机游戏多端通联进阶指南：逻辑协同与体验优化的实战手册》
    28
  • 4
    阿里云ECS云服务器创建流程：付费类型、地域、网络及可用区、实例镜像及存储选择教程
    32
  • 5
    阿里云u2a云服务器ECS通用算力型实例，CPU采用AMD EPYC处理器
    27
  • 6
    阿里云u2i云服务器ECS通用算力型实例，CPU采用Intel Xeon Platinum可扩展处理器
    21
  • 7
    LBA-ECO ND-11 树木作物下土壤水分压力和流量测量
    16
  • 8
    压缩教程学习，文件压缩包解压推荐，BANDIZIP、win_RAR、7-Zip工作使用教程
    102
  • 9
    [数据集]作弊行为检测数据集（1100张图片已划分）[目标检测]
    81
  • 10
    公链设计开发技术分析
    99

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    拔俗AI临床大数据科研分析平台：让医学研究更智能、更高效