基于Vue+ELement实现增删改查案例与表单验证

简介: 基于Vue+ELement实现增删改查案例与表单验证

前言

       Element UI是一款基于Vue.js的组件库,提供了丰富的组件和功能,包括表单、按钮、表格等。在本文中,我们将介绍如何使用Element UI实现数据的增删改查操作。

一、增删改查案例的实现

1.查询

Vue+ElementUI实现动态树和表格数据的分页模糊查询博文中已经实现查询功能。这里直接上前端代码。

<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-form-item>
    </el-form>
    <!-- 2.数据表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="书籍编号" width="180">
      </el-table-column>
      <el-table-column prop="bookname" label="书籍名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="书籍价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书籍类型">
      </el-table-column>
    </el-table>
    <!-- 3.分页条 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        bookname: '',
        tableData: [],
        rows:10,
        page:1,
        total:0
      }
    },
    methods: {
      // 定义一个查询的方法,方便调用减少代码冗余
      query(params) {
        // 向后台请求数据的访问路径
        let url = this.axios.urls.SYSTEM_BookList;
        this.axios.get(url, {
          params: params
        }).then(r => {
          console.log(r);
          this.tableData = r.data.rows;
          this.total = r.data.total;
        }).catch(e => {
        })
      },
      onSubmit() {
        let params = {
          bookname: this.bookname,
        }
        // 调用查询方法
        this.query(params);
      },
      handleSizeChange(r) { //当页大小发生变化
        // 输出查看
        console.log("当前页大小:"+r);
        let params = {
          bookname: this.bookname,
          rows:r,
          page:this.page
        }
        // 调用查询方法
        this.query(params);
      },
      handleCurrentChange(p) { //当前页页码发生变化
        // 输出查看
        console.log("当前页码:"+p);
        let params = {
          bookname: this.bookname,
          page:p,
          rows:this.rows
        }
        // 调用查询方法
        this.query(params);
      }
    },
    created() {
      // 调用查询方法
      this.query({});
    }
  }
</script>
<style>
</style>

2.增加

2.1.添加新增按钮

<el-button type="primary" @click="open">新增</el-button>

2.2.在action.js配置我们的后端接口

'BOOK_ADD': '/book/addBook',  //书籍新增

 <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear">
      <el-form :model="book">
        <el-form-item label="书籍编号" :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"></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="doyes">确 定</el-button>
      </div>
    </el-dialog>

2.4.定义我们的变量和编写打开对话框的方法

  data() {
      return {
        bookname: '',
        tableData: [],
        rows: 10,
        page: 1,
        total: 0,
        title: '新增书籍',
        dialogFormVisible: false,
        formLabelWidth: '100px',
        types: [],
        book: {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
      }
    },
 //打开弹出框-----增加修改
      open() {
        //打开弹出层
        this.dialogFormVisible = true;
      },
 //初始化弹出层
 clear() {
        this.dialogFormVisible = false;
        this.title = '新增书籍';
        this.book = {
          id: '',
          bookname: '',
          price: '',
          booktype: ''
        }
      },

2.5.新增表单的提交

doyes() {
        let url = this.axios.urls.BOOK_ADD;
        let params = {
          id: this.book.id,
          bookname: this.book.bookname,
          price: this.book.price,
          booktype: this.book.booktype
        };
        this.axios.post(url, params).then(r => {
          console.log(r);
          this.clear();//初始化对话框
          this.query({});//查询
        }).catch(e => {
        })
      },

3.修改

3.1.在表格中添加我们的操作---编辑和删除等

<el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit-outline" type="primary" @click="open(scope.$index, scope.row)">编
          </el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删
          </el-button>
        </template>
      </el-table-column>

scope.row 来获取当前行的属性值,使用 scope.$index 来获取当前行的索引。类似地,在树形控件中,我们可以使用 scope.node 获取当前节点的属性值,使用 scope.indent 获取当前节点的缩进级别。  

3.2.在action.js配置我们的后端接口

'BOOK_UPD': '/book/editBook',  //书籍修改

3.3.优化打开对话框的方法---增加修改通用

 //打开弹出框-----增加修改
      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;
        }
      },

3.4.修改表单的提交

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

4.删除

4.1.在action.js配置我们的后端接口

'BOOK_DEL': '/book/delBook',  //书籍删除

4.2.删除方法的编写

这里我们可以用到消息确认框用于提示用户是否要删除---提高用户体验

 //删除
       handleDelete(idx, row) {
        this.$confirm('此操作将删除书籍为《'+row.bookname+'》的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let url = this.axios.urls.BOOK_DEL;
          this.axios.post(url, {id:row.id}).then(r => {
            if (r.data.success) {
              this.$message({
                message: r.data.msg,
                type: 'success'
              });
              this.clear();
              this.query();
            } else {
              this.$message.error(r.data.msg);
            }
          }).catch(e => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

5.增删改查效果演示

二、表单验证

       表单验证是一种常见的前端技术,用于确保用户输入的数据符合一定的规则。在Vue中,可以使用内置的表单控件(如el-form、el-form-item、el-input等)提供的validate属性来实现表单验证。当用户提交表单时,validate属性会自动对表单中的所有控件进行验证,并返回一个包含所有验证错误的数组。如果数组为空,则表示表单验证通过;否则,数组中的每个元素对应一条错误信息,可以通过v-for指令在模板中展示给用户。

下面会以增加方法的表单提交向大家演示规则如何运用!

1.在官网中找到表单---表单验证

注意:

  1. 表单验证依赖于 el-formel-form-item 组件。确保正确地嵌套这些组件来创建表单结构。
  2. 在每个表单项的 el-form-item 组件上,使用 prop 属性指定与表单数据对象中属性名对应的值。这样可以实现与表单数据的双向绑定。
  3. 验证规则保存在一个对象中,可以在 data 中定义,并通过 :rules 属性绑定到 el-form 组件上。验证规则使用属性名对应的方式进行配置,可以设置多个验证器。
  4. 验证规则的验证器包括:required(是否必填)、min(最小长度或值)、max(最大长度或值)、pattern(正则表达式匹配)等。可以根据需求进行配置。
  5. 使用 trigger 属性来指定触发验证器的事件。可用的选项包括 blur(失去焦点时触发)、change(值改变时触发)、input(输入时触发)等。
  6. 在表单提交时,可以通过调用 this.$refs.form.validate() 方法来触发表单验证。在验证结果的回调函数中,可以判断验证通过与否,并执行相应的操作。
  7. 错误消息可以自定义,可以通过 message 属性设置。可以使用插值表达式 {{ prop }} 来动态显示属性名。
  8. 可以使用 this.$refs.form.resetFields() 方法重置表单,并清除验证错误提示。
  9. Element UI 还提供了其他的验证相关的 API,如手动触发某个表单项的验证、显示自定义错误信息等。可以根据需求查阅官方文档来了解更多详细的用法。

2.定义规则

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

可以定义多个规则,定义的规则需每一个都满足,否则都会拦截

3.使用规则

 doyes() {
        //使用规则
        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
            };
            this.axios.post(url, params).then(r => {
              console.log(r);
              this.clear();
              this.query({});
            }).catch(e => {
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

效果演示


相关文章
|
4天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
12 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
13 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
9 2
|
JavaScript 前端开发
vue开发:对Element上传功能的二次封装
最近公司老项目改用vue开发,前端框架采用element ui,这个框架风格还是很漂亮的,只是上传功能有一些问题,比如:limit=1限制上传数量后,后面的添加按钮没有隐藏,再用就是如果上传图片组,很多需求需要对图片组进行排序修改,基于这两个需求,对element的el-upload组件进行了二次封装。
2444 0
|
5天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
4天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
4天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
下一篇
无影云桌面