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

ElementUI之CUD+表单验证

2023-11-08 33
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
数据库连接
艳艳耶
目录
相关文章
穆雄雄.
|
2月前
|
人工智能 前端开发 物联网
表单验证
表单验证
穆雄雄.
14 1
众所周知
|
2月前
|
JavaScript
如何在 Vue 中进行表单验证？
如何在 Vue 中进行表单验证？
众所周知
21 0
你挚爱的强哥
|
5月前
|
JavaScript
Vue项目中使用wangEditor富文本输入框（推荐）
Vue项目中使用wangEditor富文本输入框（推荐）
你挚爱的强哥
85 0
.星空.
|
9月前
|
前端开发
vue3 中wangEditor富文本编辑器上传图片功能
vue3 中wangEditor富文本编辑器上传图片功能
.星空.
164 0
桃李春风一杯酒
|
20天前
|
JavaScript 前端开发 安全
表单处理：使用 Vue 进行表单验证和提交
【4月更文挑战第22天】Vue 提供了便捷的表单组件和验证规则，支持实时用户输入验证和错误消息显示，确保数据正确性。通过封装验证逻辑和处理异步验证，增强代码复用和安全性。同时，关注用户体验，如清晰的指示和错误反馈，防止 CSRF 攻击，实现高效、安全的表单处理。
桃李春风一杯酒
9 1
君易--鑨
|
6月前
|
JavaScript 前端开发 数据库
Vue之ElementUI实现CUD（增删改）及表单验证
Vue之ElementUI实现CUD（增删改）及表单验证
君易--鑨
79 0
朱琳均
|
5月前
ElementUI之CUD+表单验证
ElementUI之CUD+表单验证
朱琳均
25 0
君临沂
|
6月前
|
前端开发 关系型数据库 API
关于一篇ElementUI之CUD+表单验证
关于一篇ElementUI之CUD+表单验证
君临沂
27 0
云小君
|
7月前
|
JavaScript NoSQL 前端开发
ElementUI结合Vue完成主页的CUD(增删改)&表单验证
ElementUI结合Vue完成主页的CUD(增删改)&表单验证
云小君
26 0
嚣张农民
|
9月前
|
JavaScript
elementui上传图片功能(vue)
elementui上传图片功能(vue)
嚣张农民
76 0