ElementUI之增删改及表单验证

这篇具有很好参考价值的文章主要介绍了ElementUI之增删改及表单验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

                       ElementUI之增删改及表单验证,ElementUI的使用,elementui,前端,javascript,vue.js,idea,mybatis

                                 ⭐⭐本文章收录与ElementUI原创专栏:ElementUI专栏

                                     ⭐⭐   ElementUI的官网:ElementUI官网

目录

一.前言

二.使用ElementUI完成增删改

        2.1 后台代码

        2.2 前端代码

三.使用ElementUI完成表单验证


一.前言

        本章是继上一篇的基础之上在做完善,上一篇是教大家如何使用ElementUI制作动态菜单栏以及表格的分页查询,本章就是继续上篇完成剩下的增删改功能,采用的是前后端分离,大家如果有不懂的可以点击上方的ElementUI的专栏进去查看哟~

二.使用ElementUI完成增删改

        2.1 后台代码

               增删改的后端代码:

  @RequestMapping("/addBook")
    @ResponseBody
    public JsonResponseBody<?> addBook(Book book){
        try {
            bookService.insert(book);
            return new JsonResponseBody<>("新增书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("新增书本失败",false,0,null);
        }
    }

    @RequestMapping("/editBook")
    @ResponseBody
    public JsonResponseBody<?> editBook(Book book){
        try {
            bookService.updateByPrimaryKey(book);
            return new JsonResponseBody<>("编辑书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("编辑书本失败",false,0,null);
        }
    }

    @RequestMapping("/delBook")
    @ResponseBody
    public JsonResponseBody<?> delBook(Book book){
        try {
            bookService.deleteByPrimaryKey(book.getId());
            return new JsonResponseBody<>("删除书本成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("删除书本失败",false,0,null);
        }
    }

    @RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Book> books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询书本失败",false,0,null);
        }
    }

        2.2 前端代码

        定义接口:         ElementUI之增删改及表单验证,ElementUI的使用,elementui,前端,javascript,vue.js,idea,mybatis

        数据样式格式:都是去ElementUI官网copy的,然后根据自己的情况进行修改即可

<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.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>

        逻辑代码:新增和修改是共用一个弹框,然后用 if 判断,改变窗口的标题,接着根据窗体的标题来判断调用新增的方法还是修改的方法,删除的弹框的话也是在ElementUI官网中找的,获取id进行删除整条数据。

<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);
        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: "",
          pric: "",
          booktype: ""
        }
      },
      open(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>

        看一下效果吧:

ElementUI之增删改及表单验证,ElementUI的使用,elementui,前端,javascript,vue.js,idea,mybatis

三.使用ElementUI完成表单验证

        第一步:去ElementUI官网搜索表单验证:会发现需要添加:

ElementUI之增删改及表单验证,ElementUI的使用,elementui,前端,javascript,vue.js,idea,mybatis

   第二步:指定需要验证的属性字段,添加:

ElementUI之增删改及表单验证,ElementUI的使用,elementui,前端,javascript,vue.js,idea,mybatis

第三步,写验证规则

rules: {
          bookname: [{
            required: true,
            message: '请输入书籍名称',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入书籍价格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请输入书籍类型',
            trigger: 'blur'
          }]
        }

最后一步使用验证规则:

ElementUI之增删改及表单验证,ElementUI的使用,elementui,前端,javascript,vue.js,idea,mybatis

 

代码:

 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);
            this.axios.post(url, params).then(r => {
              console.info(r);
              this.clear();
              this.query({});
            }).catch(e => {

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });


      }

 好啦,看看效果吧!!

ElementUI之增删改及表单验证,ElementUI的使用,elementui,前端,javascript,vue.js,idea,mybatis文章来源地址https://www.toymoban.com/news/detail-729956.html

到了这里,关于ElementUI之增删改及表单验证的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • elementUI表单验证之动态表单验证

    elementUI 中 Form 组件提供了表单验证的功能,只需要通过  rules  属性传入约定的验证规则,并将 Form-Item 的  prop  属性设置为需校验的字段名即可。 (1)常用表单验证 (2)自定义验证规则(:validator)  有些需要自定义的校验规则可以作为变量写在data中,然后赋值

    2024年02月11日
    浏览(50)
  • elementui表单的验证问题

    element ui 是基于vue的一个ui框架,用起来还是挺不错的,但是有时候还是会遇到一些摸不着头脑的情况。 ​ 我在打开一个新增数据的对话框的时候出现了一个问题,明明是新增,但是一打开就出现了错误提示,这肯定是不对的,用户体验也是极其不好的。到底是什么原因导致

    2024年02月07日
    浏览(39)
  • ElementUI之CUD+表单验证

    ElementUI之CUD 表单验证 1.ElementUI之CUD 2.表单验证

    2024年02月07日
    浏览(37)
  • vue中elementUI表单循环验证

    进行验证的步骤

    2024年02月15日
    浏览(34)
  • 解决ElementUI动态表单校验验证不通过

    这里记录一下,写项目时遇到的一个问题:就是动态渲染的表单项,加验证规则后一直不通过!!! html部分:  js部分: 结果:   可以看到,按照官网的写法动态渲染的表单项是无法进行校验验证的。这里就是无论选中没选中值都校验 不通过。 修改prop、rules 结果:

    2024年02月12日
    浏览(36)
  • elementUi表单恢复至初始状态并不触发表单验证

    左侧是树形列表,右侧是显示节点的详情,点击+按钮应该就是新增一个规则的意思,表单内容是没有改变的,所以就把需要把表单恢复至初始状态并不触发表单验证 this.form是定义在Data里的form数据, this.$refs.form是el-form ref为form的表单

    2024年02月13日
    浏览(47)
  • vue+elementui表单数组对象深层嵌套之自定义验证规则

    需求场景:在Vue+Elementui项目中,需要在表单的循环数组中,对某一深层嵌套的对象属性制定自定义校验规则。

    2024年02月05日
    浏览(56)
  • 【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面,路由式开发(附完整代码)

    目录 效果图: 一、template部分 二、style样式 三、script部分 1.先对手机号的格式进行一个判断 2.接下来就是表单验证规则rules 3.最后就是methods了 (1)首先我们给获取验证码绑定一个方法 (2)然后封装一个axios接口,方便后面测试联调(这部分每个人封装的都不一样) (3)然

    2024年02月17日
    浏览(50)
  • ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总

    目录 一、树形表格如何添加序号体现层级关系  二、树形表格展开收缩图标位置放置,设置指定列 三、表单嵌套树形表格的校验问题以及如何给校验rules传参 普通表格绑定如下:这种方法只能校验表格的第一层,树形需要递归设置子级节点prop。 树形表格绑定如下:使用下面

    2024年02月11日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包