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

最新推荐文章于 2024-07-17 09:24:47 发布

许潜行

最新推荐文章于 2024-07-17 09:24:47 发布

阅读量455

点赞数

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/TestXzing/article/details/133724896

版权

文章目录

一、准备
二、添加功能
三、编辑功能
四、删除书籍功能
- 4.1 往methods的handleDelete方法中添加内容
五、表单验证
- 5.1 修改弹出层
- 5.2 在data中添加变量值

一、准备

在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