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

许潜行2023-10-13 4:08

文章目录

  • 一、准备
  • 二、添加功能
    • [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'}
	]
}
相关推荐
hackeroink1 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者3 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-3 小时前
验证码机制
前端·后端
燃先生._.4 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
高山我梦口香糖5 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235245 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240256 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar6 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人7 小时前
前端知识补充—CSS
前端·css
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程