SPA项目表单验证&增删改查

已于 2022-09-19 13:44:40 修改
阅读量128 收藏
点赞数
文章标签： javascript json vue.js
于 2022-09-19 13:44:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsm030616/article/details/126932090
版权

目录

一，表单验证

步骤：

1.出现表单组件 el-form

2.通过点击/新增/编辑将表单对应窗口弹出

3.给表单这只规则 rules

4.个表单提交是要效验规则

代码演示（弹出框----表单）

<!-- 编辑界面 -->
		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
			<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="文章标题" prop="title">
					<el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
				</el-form-item>
				<el-form-item label="文章内容" prop="body">
					<el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="closeDialog">取消</el-button>
				<el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
			</div>
		</el-dialog>

js代码

<scriput>
data() {
			return {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: ''
				},
				total: 0,
				title: '',
				editFormVisible: false,
				editForm: {
					title: '',
					body: '',
					id: 0
				},
				rules: {
					title: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}]
				}
			};
		},
</scriput>

补充：在表单中有的属性，在json数组中也要添加

二，增删改查

解析：

1.保证窗体正常弹出

2.表单效验通过后 调用后台数据接口完成新增功能

补充；新增方法与修改方法窗体为同一个，修改传值

<template>
	<div>
		<el-form :inline="true" :model="formInline" class="user-search">
			<el-form-item label="搜索：">
				<el-input size="small" v-model="formInline.title" placeholder="输入文章标题"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
			</el-form-item>
		</el-form>
		<!--列表-->
		<el-table size="small" :data="listData" element-loading-text="拼命加载中" style="width: 100%;">
			<el-table-column align="center" type="selection" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="id" label="文章ID" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="title" label="文章标题" min-width="2">
			</el-table-column>
			<el-table-column sortable prop="body" label="文章内容" min-width="5">
			</el-table-column>
			<el-table-column align="center" label="操作" min-width="1">
				<template slot-scope="scope">
					<el-button size="mini" @click="doEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
		 :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
		 :total="total">
		</el-pagination>
		<!-- 编辑界面 -->
		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
			<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="文章标题" prop="title">
					<el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
				</el-form-item>
				<el-form-item label="文章内容" prop="body">
					<el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="closeDialog">取消</el-button>
				<el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
 
<script>
	export default {
		data() {
			return {
				listData: [],
				formInline: {
					page: 1,
					rows: 10,
					title: ''
				},
				total: 0,
				title: '',
				editFormVisible: false,
				editForm: {
					title: '',
					body: '',
					id: 0
				},
				rules: {
					title: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			handleSizeChange(rows) {
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.search();
			},
			handleCurrentChange(page) {
				this.formInline.page = page;
				this.search();
			},
			doSearch(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
 
				this.axios.post(url, params).then((response) => {
					console.log(response);
					this.listData = response.data.result;
					this.total = response.data.pageBean.total;
				}).catch(function(error) {
					console.log(error);
				});
			},
			search() {
				this.doSearch(this.formInline);
			},
			closeDialog() {
				this.clearData();
			},
			handleEdit() {
				this.editFormVisible = true;
				this.title = '新增窗体';
			},
			doEdit(index, row) {
				this.editForm.id = row.id;
				this.editForm.title = row.title;
				this.editForm.body = row.body
				this.editFormVisible = true;
				this.title = '编辑窗体';
			},
			clearData() {
				this.title = '';
				this.editForm.id = 0;
				this.editForm.title = '';
				this.editForm.body = '';
				this.editFormVisible = false;
			},
			deleteUser(index, row) {
				let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
				this.axios.post(url, {id:row.id}).then((response) => {
					console.log(response);
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let url;
						if (this.editForm.id == 0) {
							url = this.axios.urls.SYSTEM_ARTICLE_ADD;
						} else {
							url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
						}
						// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
 
						this.axios.post(url, this.editForm).then((response) => {
							console.log(response);
							this.clearData();
							this.search();
						}).catch(function(error) {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		created() {
			this.doSearch({});
		}
	}
</script>
 
<style>
 
</style>
zsm030616
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解Vue SPA项目优化小记
08-27
主要介绍了详解Vue SPA项目优化小记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element ui 里的表单验证说明
晴天Smile
11-14 3503
el-table-column label="操作" width="230">                     template scope="scope">                         el-button class='btn' size="small" @click="handleEdit(scope.$index, scope.row)">编辑el-butto
SPA项目开发之CRUD与表单验证
程 序 猿的博客
08-14 166
SPA项目开发之CRUD与表单验证 在上几篇的博客已经把动态树，数据表格，分页实现了，就来完成CRUD了 我是对文章的增删查改
element点击表格的编辑获取当前行数据填充到编辑表单中
yufengguanyun的博客
02-10 2135
< !--1.做一个表格 --> <el-table :data="users" highlight-current-row style="width: 100%;"> <el-table-column type="selection" width="55" /> <el-table-column type="index" width="60" /> <el-table-col...
重置表单验证信息
liaoxuewu的博客
07-24 1615
这个问题主要出现在dialog里面，就是在打开弹出框，表单验证不通过，会出现提示信息，不进行任何处理关闭后第二次打开，这些提示信息依旧显示。有两种实现方式： 1、重置表单信息，刷新页面 原文链接：https://www.cnblogs.com/hezihao/p/7416820.html 2、利用watch监视dialog的显示状态，重置表单 这种方式也有人写过，我改动了一点点，原文链...
SPA之表单验证+增删改查
尽力漂亮的博客
09-30 305
文章目录课程目标1、表单验证2、增删改功能实现 课程目标 1、表单验证 :rules=“rules” 详情见饿了么官网 <!-- 编辑界面 --> <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog"> <el...
SPA护理项目介绍网页模板
01-21
SPA护理项目介绍网页模板
AngularJS实现表单验证
12-10
AngularJS提供了很方便的表单验证功能，在此记录一番。 首先从下面这段代码开始 代码如下: <form ng-app=”myApp” ng-controller=”validationController” name=”mainForm” novalidate>  <p>Email:  &...
mobxSpa：企业级SPA项目，完整开发脚手架
02-05
mobx_antd_react中后台SPA完整项目脚手架。写在前面这是一个不断迭代，与时俱进的中后台项目。项目规范总结在/ document目录下。如果对你的项目建造有帮助的话，随手给个星，感谢。特色webpack一个适用于真实项目...
基于Vue的SPA动态修改页面title的方法(推荐)
08-28
主要介绍了基于Vue的SPA动态修改页面title的方法,需要的朋友可以参考下
VUE+elementUI实现弹窗（dialog）编辑某条数据
王魂风气的博客
11-11 1万+
最近要使用VUE+elementUI的框架，我开始学习了vue的知识，在写demo实现弹窗编辑表格数据的时候遇到了一个问题：弹窗中的数据不知道怎么传到对应的表格中去，网上搜了一大堆，都是粘贴复制的，只实现了打开弹窗，弹窗获取表格中数据，而没有实现怎么把弹窗中的值写入到表格中。 经过摸索，最后我终于实现了，完整代码如下： <template> <div id="app" sty...
vuejs+element UI 点击编辑表格某一行时获取内容填入表单
热门推荐
caixiaodaohaha的博客
01-31 4万+
如果是已经有点经验的同学，可以直接看下面这个函数，应该就能明白怎么回事，新手可以看下面的详细教程。 函数： handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); }详细教程： 1.首先，做一个表格，用于显示信息；代码如下：
基于vue.js 2.0，不使用webpack，只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
时光的灰烬
04-17 9561
源码： 表格控件测试 {{ message }}
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 319
注释很详细，直接上代码……
Babel 原理浅析
qq_39454432的博客
04-29 811
Babel 原理浅析
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 595
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
遍历JavaScript对象（字典）
weixin_45596561的博客
05-01 342
遍历JavaScript对象（字典）是编程中常见的需求。for...in循环提供了最直接的方式，但在某些情况下可能需要额外的检查。与forEach结合使用提供了另一种遍历方式，特别是在您使用现代JavaScript版本时。根据您的具体需求和偏好，可以选择最适合您的遍历方法。
vue 增删改查
06-01
下面是一个简单的 Vue.js 实例，演示如何使用 Vue.js 实现增删改查操作： HTML 代码： ``` <h1>Vue.js Todo List <button type="submit">Add Todo (todo, index) in todos" :key="index"> {{ todo }}...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值