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

ElementUI之CUD+表单验证

2023-11-08 189
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
数据库连接
艳艳耶
目录
相关文章
李海滨
通过 ansible 创建 openstack 虚拟机并部署应用（实战篇）
前文 通过 ansible 创建 openstack 虚拟机并部署应用（配置篇） 接下来我们实战一下。 目录结构 ── ansible.cfg├── group_vars│ ├── all.yml├── openstack.
李海滨
6001 0
叫我默语
|
Java Maven
IDEA配置Maven教程
IDEA配置Maven教程
叫我默语
3857 0
小陈写代码
|
2月前
|
人工智能 弹性计算 Linux
阿里云轻量应用服务器2核2G38元，2核4G9.9元1个月、199元1年：抢购成功可以做什么？
2026年阿里云的轻量应用服务器抢购活动，新增了一款2核4G配置，与2核2G款共同构成高性价比选择。2核2G配置适合个人博客、企业官网等轻量应用，38元/年；2核4G配置则支持更复杂任务，如搭建AI助理、运行小型数据库等，9.9元/月起。两款服务器均预装丰富镜像，便于快速部署。活动面向新用户，抢购需遵守严格规则。
小陈写代码
445 1
来一杯热Java
|
1月前
|
缓存 监控 NoSQL
【Redis】Redis缓存核心问题：热点key问题、缓存预热、缓存降级
本文系统构建Redis缓存三大核心问题的知识体系：**缓存预热（前置防控）、热点key治理（运行时管控）、缓存降级（故障兜底）**，覆盖全生命周期稳定性保障，助力高并发场景下实现高性能、高可用、高可靠的缓存架构。
来一杯热Java
188 3
游客chpjeat5ym4ze
|
2月前
|
算法 安全 测试技术
多智能体协同中的任务拆解与动作映射：关键指标对比与算法设计思路
本文聚焦2026年企业级多智能体落地核心瓶颈——任务拆解不准与语义到动作映射断层，提出“分层级树状拆解+分布式角色调度”算法及五维特征驱动的动作映射技术，构建可评估、可复用、强合规的工程化方案，并通过实测数据验证其在跨系统长链路任务中96.2%执行成功率与92.3%异常自修复率。
游客chpjeat5ym4ze
305 6
云吞铺子
|
2月前
|
人工智能 自然语言处理 监控
阿里云JVS Claw是什么？JVS Claw核心功能、使用场景与部署全攻略
阿里云JVS Claw（“养龙虾”）是2026年3月上线的零代码AI智能体平台：https://t.aliyun.com/U/IJbaxg 用户仅凭自然语言指令即可创建专属Clawbot，在安全隔离的云端ClawSpace中自动执行网页浏览、文件处理、内容生成等任务，支持多端同步与技能进化。
云吞铺子
921 3
游客odzrrstui7c26
|
2月前
|
人工智能 JavaScript 数据可视化
OpenClaw v2.6.4 安装与基础功能使用指南（包含最新版安装包）
OpenClaw 是一款面向 Windows 10/11 的 AI 桌面智能体一键部署工具。无需命令行，内置全部依赖，5 分钟可视化安装，支持键鼠操控与多模型对话，新手友好，开箱即用。
游客odzrrstui7c26
251 0
程序员小海绵
|
编解码 NoSQL Java
学成在线笔记+踩坑（6）——【媒资模块】视频处理。FFmpeg+XXL-JOB
FFmpeg处理视频、XXL-JOB分布式任务调度平台
程序员小海绵
640 1
学成在线笔记+踩坑（6）——【媒资模块】视频处理。FFmpeg+XXL-JOB
_揽
video-04-videojs配置及使用
video-04-videojs配置及使用
_揽
1093 1
中间件小哥
|
存储 人工智能 Kubernetes
95后宠爱的百变音乐神器，唱鸭玩转云原生AI
容器镜像服务企业版 ACR EE 不仅具备高效的镜像分发能力，而且也提供了安全的云原生应用交付链能力，唱鸭可以从容不迫地完成每天 10+ 次的容器化部署，DevSecOps 的体感非常顺滑。
中间件小哥
2684 100
95后宠爱的百变音乐神器，唱鸭玩转云原生AI

热门文章

最新文章

  • 1
    阿里云快照怎么收费？云服务器快照收费标准了解一下
  • 2
    浅谈GPU虚拟化技术（五）：GPU图形渲染虚拟化的业界难题-VDI的用户体验
  • 3
    jsQR 一个完全独立的javascript 二维码识别库
  • 4
    非“典型”向量数据库AnalyticDB PostgreSQL及RAG服务实践
  • 5
    为什么haveged不适合在虚拟机上使用
  • 6
    Effective C++ 2e Item39
  • 7
    java 数组插入元素
  • 8
    微信调试器
  • 9
    微信公众平台开发（51）会员卡
  • 10
    [转贴]ParameterizedThreadStart，ThreadStart的使用，线程Thread传参数
  • 1
    阿里云Linux服务器PHP项目完整部署指南：从环境搭建到安全上线
    56
  • 2
    Hermes Agent 核心必学：SubAgent 子代理的 5 个实战技巧，多任务处理效率翻倍
    76
  • 3
    【剪映小助手】添加音频接口（Add Audios）
    55
  • 4
    无人机战场侦察6类军事目标检测数据集分享（适用于YOLO系列深度学习分类检测任务）
    52
  • 5
    Understand-Anything：不用硬啃源码，把项目变成一张能追问的知识图谱
    76
  • 6
    CodeGraph 爆火：编程 Agent 需要的不是更多上下文，而是一张提前画好的代码地图
    281
  • 7
    基于ResNet50的鱼类识别系统设计 图像分类识别
    60
  • 8
    基于PyTorch的EfficientDet进行水下目标检测 水下目标检测
    48
  • 9
    阿里云百炼CLI全解 命令行工具接入AI Agent实操与能力指南
    55
  • 10
    基于OpenCV的图像拼接系统
    50

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云正式发布 Agentic 代码安全：AI驱动的双Agent协同引擎