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

文章目录

  • 一、准备
  • 二、添加功能
    • [2.1 新增添加按钮](#2.1 新增添加按钮)
    • [2.2 添加弹出框](#2.2 添加弹出框)
    • [2.3 data中添加内容](#2.3 data中添加内容)
    • [2.4 methods中添加相关方法](#2.4 methods中添加相关方法)
  • 三、编辑功能
    • [3.1 表格中添加编辑和删除按钮](#3.1 表格中添加编辑和删除按钮)
    • [3.2 methods中添加方法](#3.2 methods中添加方法)
    • [3.3 修改methods中clear方法](#3.3 修改methods中clear方法)
    • [3.4 修改methods中的handleSubmit方法](#3.4 修改methods中的handleSubmit方法)
  • 四、删除书籍功能
    • [4.1 往methods的handleDelete方法中添加内容](#4.1 往methods的handleDelete方法中添加内容)
  • 五、表单验证
    • [5.1 修改弹出层](#5.1 修改弹出层)
    • [5.2 在data中添加变量值](#5.2 在data中添加变量值)

一、准备

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

js 复制代码
'BOOK_ADD': '/book/addBook', //书籍添加
'BOOK_EDIT': '/book/editBook', //书籍编辑
'BOOK_DEL': '/book/delBook', //书籍删除

二、添加功能

2.1 新增添加按钮

html 复制代码
<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 添加弹出框

html 复制代码
<!--添加删除的弹出框-->
<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中添加内容

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

2.4 methods中添加相关方法

js 复制代码
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 表格中添加编辑和删除按钮

html 复制代码
<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中添加方法

js 复制代码
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方法

js 复制代码
clear() {
	this.dialogFormVisible = false;
	this.book.booktype = '';
	this.book.bookname = '';
	this.book.price = '';
	this.title = '';
},

3.4 修改methods中的handleSubmit方法

js 复制代码
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方法中添加内容

js 复制代码
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 修改弹出层

html 复制代码
 <!--添加删除的弹出框-->
<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中添加变量值

js 复制代码
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'}
	]
}
相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js