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'}
	]
}
相关推荐
时光少年2 分钟前
Android 视频分屏性能优化——GLContext共享
前端
IT_陈寒20 分钟前
JavaScript开发者必知的5个性能杀手，你踩了几个坑？
前端·人工智能·后端
跟着珅聪学java24 分钟前
Electron 精美菜单设计
运维·前端·数据库
日光倾24 分钟前
【Vue.js 入门笔记】闭包和对象引用
前端·vue.js·笔记
EstherNi26 分钟前
左右两侧定位的效果，vue3
javascript·vue.js
一只程序熊30 分钟前
UniappX 未找到 “video“ 组件，已自动当做 “view“ 组件处理。请确保代码正确，或重新生成自定义基座后再试。
前端
林小帅32 分钟前
【笔记】xxx 技术分享文档模板
前端
雾岛心情37 分钟前
【HTML&CSS】HTML为文字添加格式和内容
前端·css·html
心.c1 小时前
如何在项目中减少 XSS 攻击
前端·xss
Rsun045511 小时前
Vue相关面试题
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04得物前端部门，没了05OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录06OpenClaw 飞书机器人不回复消息？3 小时踩坑总结07OpenClaw macOS 完整安装与本地模型配置教程（实战版）08Window 10部署openclaw报错node.exe : npm error code 12809OpenClaw 接入 QQ Bot 完整实践指南10npm-error code 128问题解决方法