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

    文章目录

    一、准备

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

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

    • 1
    • 2
    • 3

    二、添加功能

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    2.3 data中添加内容

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    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();
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    在这里插入图片描述

    三、编辑功能

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    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 = '编辑书籍';
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    3.3 修改methods中clear方法

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    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 => {
 
    })
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    在这里插入图片描述

    四、删除书籍功能

    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: '已取消删除'
        });
    });
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    在这里插入图片描述

    五、表单验证

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    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'}
	]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

  • 相关阅读:
    贪心算法之装箱问题
    进化：元宇宙明天的主题
    webpack之Scope Hoisting（范围提升）
    js_字符串
    with recursive用法
    【牛客刷题】每日一练——回文字符串
    空间结构是可数的吗?
    NumPy数组与矩阵（二）
    一个免杀项目分享
    数据库及ADO.NET学习（七）
  • 原文地址：https://blog.csdn.net/TestXzing/article/details/133724896