ElementUI--数据表格增删改查与表单验证

已于 2023-10-10 09:48:37 修改
阅读量1.1k 收藏 2
点赞数 2
文章标签： 前端 vue.js javascript 开发语言 elementui
于 2023-10-09 22:31:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ying_hao_kun/article/details/133718735
版权

一、CRUD实现

1.1 后台CRUD编写

package com.zking.ssm.controller;

import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.JsonResponseBody;
import com.zking.ssm.util.PageBean;
import com.zking.ssm.vo.BookFileVo;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/book")
public class BookController {

    @Autowired
    private IBookService bookService;

    @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);
        }
    }

    @RequestMapping("/queryBookCharts")
    @ResponseBody
    public JsonResponseBody<?> queryBookCharts(){
        try{
            Map<String, Object> charts = bookService.queryBookCharts();
            return new JsonResponseBody<>("OK",true,0,charts);
        }catch (Exception e){
            e.printStackTrace();
            return new JsonResponseBody<>("查询统计分析数据失败",false,0,null);
        }
    }

    @RequestMapping("/upload")
    @ResponseBody
    public JsonResponseBody<?> upload(BookFileVo bookFileVo){
        try {
            MultipartFile bookFile = bookFileVo.getBookFile();
            System.out.println(bookFileVo);
            System.out.println(bookFile.getContentType());
            System.out.println(bookFile.getOriginalFilename());
            return new JsonResponseBody<>("上传成功",true,0,null);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("上传失败",false,0,null);
        }
    }

    @RequestMapping("/download")
    public void download(HttpServletRequest request, HttpServletResponse response){
        try {
            String relativePath = "uploads/1.jpg";
            String absolutePath = request.getRealPath(relativePath);
            InputStream is = new FileInputStream(new File(absolutePath));
            OutputStream out = response.getOutputStream();
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
            byte[] by = new byte[1024];
            int len = -1;
            while (-1 != (len = is.read(by))) {
                out.write(by);
            }
            is.close();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @RequestMapping("/downloadUrl")
    public void downloadUrl(HttpServletRequest request, HttpServletResponse response){
        String relativePath = "uploads/1.jpg";
        String absolutePath = request.getRealPath(relativePath);
        InputStream is = null;
        OutputStream out = null;

        try {
            is = new FileInputStream(new File(absolutePath));
            // 设置Content-Disposition
            response.setHeader("Content-Disposition",
                    "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
            out = response.getOutputStream();
            IOUtils.copy(is, out);
            response.flushBuffer();
            System.out.println("完成");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            IOUtils.closeQuietly(is);
            IOUtils.closeQuietly(out);
        }
    }
}

1.2 配置访问路径

src/api/action.js :

  //获取书本信息
  'BOOKMSG_BOOKINFO_REQ': '/book/queryBookPager',
  //新增书本
  'BOOK_ADD': '/book/addBook',
  //修改书本
  'BOOK_EDIT': '/book/editBook',
  //删除书本
  'BOOK_DEL': '/book/delBook',

1.3 前端编写（及窗口）

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <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="warning" @click="onSubmit()">查询</el-button>
        <el-button type="warning" icon="el-icon-plus" @click="addBook()">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
      <!-- “编辑”“删除”功能连接 -->
      <el-table-column label="操作">
        <!--
          在<template>上使用特殊的slot-scope 特性，可以接收传递给插槽的prop
          slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取
          row对象信息和行索引index信息即可
        -->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
 
    <!--
  弹出窗口：增加和修改书本信息共用一个弹出窗口，需要根据用户的选择动态的设置弹出窗口的标题
  :tile  通过绑定值的方式设置dialog的标题
  :visible.sync  控制弹出窗口的显示或隐藏，.sync同步修饰符
  @close="closeBookForm"，设置窗口关闭时调用的处理函数，可用于清空表单
  :model="bookForm"：用于定义表单对应的model，具体model的定义可见data部分。
  v-show="optiontype == 'update'" 通过操作类型控制是否显示书本编号字段，如果当前操作类型为
         新增，则不用显示，书本编号在数据表中是自增的。
  :label-width="formLabelWidth" 统一定义标签的宽度。
  :style="{width: formEleWidth}"  统一定义form元素的宽度。
  -->
    <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
      <el-form :model="bookForm">
        <el-form-item v-show="optiontype == 'update'" label="编号" :label-width="formLabelWidth">
          <el-input v-model="bookForm.id" autocomplete="off" :style="{width: formEleWidth}"></el-input>
        </el-form-item>
        <el-form-item label="书名" :label-width="formLabelWidth">
          <el-input v-model="bookForm.bookname" autocomplete="off" :style="{width: formEleWidth}"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="bookForm.price" autocomplete="off" :style="{width: formEleWidth}"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="bookForm.booktype" placeholder="选择类型" :style="{width:formEleWidth}">
            <el-option label="名著" value="mz"></el-option>
            <el-option label="小说" value="xs"></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="saveBook()">确 定</el-button>
      </div>
    </el-dialog>
 
  </div>
 
</template>

注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
       :visible.sync="dialogFormVisible"
    
注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
       @close="dialogClose" 

1.4 增删改查实现

<script>
  export default {
    name: 'BookList',
            
    data() {

      
      return {



        bookname: '',
        tableData: [],
        rows: 10,
        total: 0,
        page: 1,
 
        //控制对话框是否显示，默认是隐藏状态
        dialogFormVisible: false,
 
        //统一控制标签的宽度
        formLabelWidth: '40px',
 
        //统一控制表单元素的宽度
        formEleWidth: '400px',
 
        //对话框标题，默认为新增，如果是点击修改按钮打开对话框，则标题应为修改。
        dialogName: '新增书本',
 
        //操作类型，默认为添加，如果是点击修改打开对话框，则操作类类型应变为修改
        //该变量用于控制是否显示书本编号字段，当操作类型为新增时不需显示（书本编号数据表字段为自增）
        //当操作类型为修改时，需要显示。
        optiontype: 'add',
        
        //定义验证规则
        rules:{
          bookname: [{
              required: true,
              message: '请输入书籍名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'blur'
            }
          ],
          price: [{
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请输入书籍类别',
            trigger: 'blur'
          }]
        },
 
        //定义表单对应的model
        bookForm: {
          id: '',
          bookname: '',
          price: null,
          booktype: ''
        }
        
      }





    },
    methods: {

      /* 新增书本 */
      saveBook() {
        
        this.$refs['bookForm'].validate((valid) => {
         
          if (valid) {
            //默认新增
            var url = this.axios.urls.BOOK_ADD;
            if (this.optiontype == 'update') {
              url = this.axios.urls.BOOK_EDIT;
            }
            console.log(url)
            this.axios.post(url, this.bookForm).then(d => {
              //关闭窗口
              this.closeBookForm();
              this.dialogFormVisible = false;
              this.query({});
            }).catch();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
 
      },

      //选择分页
      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);
      },
      //查询方法
      query(params) {
        //获取后台请求书籍数据的地址
        let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
        this.axios.get(url, {
          params: params
        }).then(d => {
          this.tableData = d.data.rows;
          this.total = d.data.total;
        }).catch(e => {});
      },
      onSubmit() {
        let params = {
          bookname: this.bookname
        }
        console.log(params)
        this.query(params);
        this.bookname = ''
      },
 
      //当关闭对话框时，该方法用于清空表单
      closeBookForm() {
        this.bookForm.id = null;
        this.bookForm.bookname = null;
        this.bookForm.booktype = null;
        this.bookForm.price = null;
      },
 
      //打开对话框，将对话框标题设置为新增，操作类型设置为'add'
      addBook() {
        this.dialogName = '新增书本信息';
        this.dialogFormVisible = true;
        this.optiontype = 'add';
      },
 
      //打开对话框，将对话框标题设置为修改，操作类型设置为'update'，
      //并使用获取的待修改的记录的值设置对应的表单元素
      handleEdit(row) {
        this.dialogName = '编辑书本信息';
        this.dialogFormVisible = true;
 
        this.bookForm.id = row.id;
        this.bookForm.bookname = row.bookname;
        this.bookForm.booktype = row.booktype;
        this.bookForm.price = row.price;
        this.optiontype = 'update';
      },

 
      //删除书本记录
      handleDelete(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //获取删除书本访问路径
          var url = this.axios.urls.BOOK_DEL;
          this.axios.post(url, {
            id: row.id
          }).then(r => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.query({});
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
 
    },
    created() {
      this.query({})
    }
 
  }
</script>
1.4.1 新增示例

1.4.2 修改示例

1.4.3 删除示例

二、表单验证

2.1 设置表单验证属性

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

2.2 自定义验证规则

 //定义验证规则
        rules:{
          bookname: [{
              required: true,
              message: '请输入书籍名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'blur'
            }
          ],
          price: [{
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }],
          booktype: [{
            required: true,
            message: '请输入书籍类别',
            trigger: 'blur'
          }]
        },

2.3 使用规则

      /* 新增书本 */
      saveBook() {
 
        this.$refs['bookForm'].validate((valid) => {
          if (valid) {
            //默认新增
            var url = this.axios.urls.BOOK_ADD;
            if (this.optiontype == 'update') {
              url = this.axios.urls.BOOK_EDIT;
            }
            console.log(url)
            this.axios.post(url, this.bookForm).then(d => {
              //关闭窗口
              this.closeBookForm();
              this.dialogFormVisible = false;
              this.query({});
            }).catch();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
 
      },

2.4 效果演示

Java_文昊‍️
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue2 中如何实现动态表单增删改查实例
08-30
本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Mybatis开发环境搭建实现数据的增删改查功能
08-31
主要介绍了 Mybatis开发环境搭建实现数据的增删改查功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Python3.6.4+Django2.0.2 单表的增删改查和表单验证（亲试可用）.zip
09-16
Python3.6.4+Django2.0.2 单表的增删改查和表单验证（测试完全通过） 代码放在pdf里
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui实现表格内容修改
码上红尘仙的博客
04-14 1612
this.$message.error(res.msg || '操作失败')this.$message.success('分类添加成功！this.$message.error('请求出错了：' + err)this.$message.error('请求出错了：' + err)label="项目"label="单位"label="一级"label="二级"label="三级"
基于Vue+ELement实现增删改查案例与表单验证（附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-27 8581
增删改查是我们写项目百分之七十会遇到的代码，学会Vue+ELement这一套增删改查的流程让你的写代码的效率一步登天！！！
ElementUI增加,删除,修改的实现及表单验证
Java炒饭的博客
07-27 2661
ElementUI增加,删除,修改的实现及表单验证
通过ElementUi在Vue搭建的项目中实现CRUD
lz17267861157的博客
10-03 1562
🏅，一个在CSDN分享笔记的博主。📚📚🌟在这里，我要推荐给大家我的专栏《🎯🎯🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆🌈让我们在Vue的世界里畅游吧！🌈🎁🎁💖期待你的加入，一起学习，一起进步！💖💖。
vue+elementui新增/编辑/删除
CMDN123456的博客
03-05 3484
vue+elementui 调用接口的新增/编辑/删除
ElementUI保姆级教学完成前端CRUD操作
权衡
06-24 806
按照行业规矩， 写博客都要介绍博客所说的技术是干嘛的，长篇大论的话我就不说了，逼格不够高面试官那也虎不住，我用一句话来概括就是：饿了么写的一个非常棒的UI组件，通过 vue add element 就能完成Vue引用此UIElementUI官方文档 按照图内勾选即可main.js就会自动引入这个包插件，两年elementui的时候还需要手动官网复制粘贴代码就很烦 为了做到前后端数据交互，我们引入一下axios这个技术他跟ajax一样解决跨域问题的，不知道这么说对不对在我学习的时候就是这个印象，有强迫症的
Python3.6.4+Django2.0.2 单表的增删改查和表单验证（测试完全通过）
07-06
Python3.6.4+Django2.0.2 单表的增删改查和表单验证，原创。直接拷贝到项目对应的目录中即可使用，无需修改任何代码
element-ui中在表单中修改数据，table表格的数据也跟着修改的问题
weixin_43697849的博客
11-27 1348
大家在修改的时候有的会通过点击事件里面获取点击列表的值然后去赋值，但是row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复制的是地址，导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝。 -解决方案：利用JSON进行深拷贝 在点击事件里：this.currentInfo = JSON.parse(JSON.stringify(row)); 有用到帮忙点个赞谢谢！！！ ...
vue结合Element UI如何实现表格数据的修改操作
热门推荐
浮生离梦的博客
02-11 2万+
一、Element UI中表格数据的修改 在Element UI中，实现修改操作，需要弹出一个对话框，可以使用Dialog对话框组件。在data中，我们需要定义一个数据editDialogVisible，它的作用是控制添加用户对话框的显示与隐藏，默认为隐藏，代码如下： // 控制修改用户对话框的显示与隐藏，默认为隐藏 editDialogVisible: false 在页面...
Element UI 实现增删改查
flowery_的博客
05-18 2296
Element UI 实现增删改查 （以广告的增删改查为例） <template> <div > <el-card> <div><h2><el-button @click="createNewAdvertisementDialogVisible=true" type="primary">create</el-button></h2></div> <el-ta
Vue + Element UI 实现对表格的增加，删除以及修改功能（附代码+整体思路） --柚子真好吃
java
11-28 5910
Vue + Element UI 实现对表格的增加，删除以及修改功能 --柚子真好吃一、表格代码准备二、增加功能 该文章在表格成功展示的基础上进行维护，包含整体设计思路适用于新人上手。 表格构建请参考： https://blog.csdn.net/baidu_39265156/article/details/103216161 文章源码参考：https://github.com/Reckless...
vue element form rules表单规则验证，输入框有值，但验证始终不消失问题的个人解决办法
qq_38876396的博客
06-23 4786
本文章对element的表单规则验证中输入框有值，但验证始终不消失的问题，在个人项目的特殊情况下提出解决办法
Element ui 树形表格 增删改查
qq_45308915的博客
11-12 3413
如何使用Element ui 树形表格 增删改查 概述：element ui 提供了树的增删改查，百度了很久发现没有合适的，只能自己封装了， 大概样子就是这样，有四个操作功能按钮，增加子集，增加同级，删除，清空，思路参考了element ui 树的增删改查 直接看代码 . 首先是表格，多余的表格行我删除了 自行添加 <el-table :data="tableData" style="width: 100%;fo
vue+elementUI表格组件（支持多选、分页、选中回显、搜索、增删改查）
张井乙ccccyc的博客
11-29 1万+
vue+elementUI+table+checkbox多选列表组件（支持表格分页，解决分页回显等问题） 组件功能 1、支持不同表头复用 2、支持多选，单选 3、支持增、删、改、查、功能 4、支持分页 ...
基于Vue+ELement实现增删改查案例与表单验证
最新发布
weixin_74268571的博客
10-10 1392
Element UI和Vue增删改查案例的实现步骤，以及表单验证规则的定义与使用
element-ui实现表单表格增删改查
06-07
以下是一个简单的例子，展示了如何使用element-ui实现表单和表格的增删改查功能： ``` <el-form :model="form" :rules="rules" ref="form" label-width="100px" style="margin-bottom: 20px;"> <el-form-item ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值