ElementUI增删改的实现及表单验证

简介: ElementUI增删改的实现及表单验证


一、准备

在action.js中添加对后台请求的地址

'BOOK_ADD': '/book/addBook', //书籍添加
'BOOK_EDIT': '/book/editBook', //书籍编辑
'BOOK_DEL': '/book/delBook', //书籍删除

二、添加功能

2.1 新增添加按钮

<template>
  <div style="padding: 20px">
    ....
  //新增语句开始
    <el-button type="success" @click="onAdd()">新增</el-button>
  //新增语句结束
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
        .....
    </el-table>
   ...
  </div>
</template>

2.2 添加弹出框

<!--添加删除的弹出框-->
<el-dialog title="新增书籍" :visible.sync="dialogFormVisible">
    <el-form :model="book">
        <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="by in booktypes" :label="by.name" :value="by.name"            :key="by.id"></el-option>
      </el-select>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
  </div>
</el-dialog>

2.3 data中添加内容

book: {
  id: '',
  bookname: '',
  price: '',
  booktype: ''
},
dialogFormVisible: false,
formLabelWidth: '100px',
booktypes: [{id: 1, name: '玄幻'}, {id: 2, name: '名著'}, {id: 3, name: '计算机'}],
title: '新增书籍'

2.4 methods中添加相关方法

clear(){
    this.dialogFormVisible = false;
    this.book.booktype = '';
    this.book.bookname = '';
    this.book.price = '';
},
onAdd() {
  this.dialogFormVisible = true;
},
handleSubmit(){
  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(resp=>{
    if(resp.data.success){
      this.$message({
        message: resp.data.msg,
        type: 'success'
      });
      this.clear();
            let params = {
                bookname: this.bookname
            }
          this.query(params);
        }else{
      this.$message({
        message: resp.data.msg,
        type: 'error'
      })
        }
  }).catch(err=>{
  })
},
handleCancel(){
  this.clear();
},

三、编辑功能

3.1 表格中添加编辑和删除按钮

<el-table-column label="操作">
  <template slot-scope="scope">
        <el-button size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button size="mini" type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
  </template>
</el-table-column>

3.2 methods中添加方法

handleDelete(idx, row) {
},
handleEdit(idx, row) {
  this.dialogFormVisible = true;
  this.book.id = row.id;
  this.book.bookname = row.bookname;
  this.book.booktype = row.booktype;
  this.book.price = row.price;
  this.title = '编辑书籍';
},

3.3 修改methods中clear方法

clear() {
  this.dialogFormVisible = false;
  this.book.booktype = '';
  this.book.bookname = '';
  this.book.price = '';
  this.title = '';
},

3.4 修改methods中的handleSubmit方法

handleSubmit() {
    let url = '';
    let params;
    if (this.title == '新增书籍') {
        url = this.axios.urls.BOOK_ADD;
        params = {
            bookname: this.book.bookname,
            price: this.book.price,
            booktype: this.book.booktype
        }
    } else {
        url = this.axios.urls.BOOK_EDIT;
        params = {
            id: this.book.id,
            bookname: this.book.bookname,
            price: this.book.price,
            booktype: this.book.booktype
        }
    }
    this.axios.post(url, params).then(resp => {
        if (resp.data.success) {
            this.$message({
                message: resp.data.msg,
                type: 'success'
            });
            this.clear();
            let params = {
                bookname: this.bookname
            }
            this.query(params);
        } else {
            this.$message({
                message: resp.data.msg,
                type: 'error'
            })
        }
    }).catch(err => {
    })
},

四、删除书籍功能

4.1 往methods的handleDelete方法中添加内容

handleDelete(idx, row) {
    this.$confirm('您确定删除id为' + row.id + '的书籍吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        let url = this.axios.urls.BOOK_DEL;
        this.axios.post(url, {id: row.id}).then(resp => {
            if (resp.data.success) {
                this.$message({
                    message: resp.data.msg,
                    type: 'success'
                });
                this.clear();
                let params = {
                    bookname: this.bookname
                }
                this.query(params);
            } else {
                this.$message({
                    message: resp.data.msg,
                    type: 'error'
                })
            }
        })
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });
    });
},

五、表单验证

5.1 修改弹出层

<!--添加删除的弹出框-->
<el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="book" :rules="rules" ref="book">
        <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
            <el-input v-model="book.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
            <el-input v-model.number="book.price" autocomplete="off"></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="by in booktypes" :label="by.name" :value="by.name" :key="by.id"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
</el-dialog>

5.2 在data中添加变量值

rules:
{
    bookname: [
        {required: true, message: '请输入书本名称', trigger: 'blur'},
        {min: 1, message: '长度必须在1个字符以上', trigger: 'blur'}
    ],
  price: [
    {required: true, message: '请输入书本价格', trigger: 'blur'},
    {type: 'number', message: '必须为数字', trigger: 'blur'}
  ],
  booktype: [
    {required: true, message: '请选择书籍类型', trigger: 'blur'}
  ]
}

目录
相关文章
|
前端开发 JavaScript API
基于Vue+ELement实现增删改查案例与表单验证
基于Vue+ELement实现增删改查案例与表单验证
570 0
|
2月前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
238 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
4月前
|
JavaScript 前端开发 数据处理
在vue中的form表单中下拉框中的数据来自数据库查询到的数据
这篇文章介绍了如何在Vue框架的表单中将下拉框的数据通过后端接口从数据库动态查询并加载,包括前端HTML代码、JavaScript数据处理、后端接口实现以及表单提交的完整流程。
在vue中的form表单中下拉框中的数据来自数据库查询到的数据
|
JavaScript 前端开发 数据库
Vue之ElementUI实现CUD(增删改)及表单验证
Vue之ElementUI实现CUD(增删改)及表单验证
126 0
|
7月前
|
JavaScript 前端开发 安全
表单处理:使用 Vue 进行表单验证和提交
【4月更文挑战第22天】Vue 提供了便捷的表单组件和验证规则,支持实时用户输入验证和错误消息显示,确保数据正确性。通过封装验证逻辑和处理异步验证,增强代码复用和安全性。同时,关注用户体验,如清晰的指示和错误反馈,防止 CSRF 攻击,实现高效、安全的表单处理。
85 1
|
前端开发
ElementUI之增删改及表单验证
ElementUI之增删改及表单验证
103 0
ElementUI之CUD+表单验证
ElementUI之CUD+表单验证
50 0
|
JavaScript 前端开发
【Vue.js】使用ElementUI实现增删改查(CRUD)及表单验证
【Vue.js】使用ElementUI实现增删改查(CRUD)及表单验证
125 0
ElementUI实现增删改功能以及表单验证
ElementUI实现增删改功能以及表单验证
|
前端开发 关系型数据库 API
关于一篇ElementUI之CUD+表单验证
关于一篇ElementUI之CUD+表单验证
60 0