CUD表单验证+增删改查

最新推荐文章于 2023-10-10 08:45:00 发布

我真的不想秃头！

最新推荐文章于 2023-10-10 08:45:00 发布

阅读量305

点赞数

分类专栏：项目

本文链接：https://blog.csdn.net/m0_47906344/article/details/108233769

版权

项目专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CUD表单验证+增删改查

主要内容

1.后台数据接口准备
增删改接口

2.Dialog弹出框

2.1 基本结构

 <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose">
    <!-- form表单 -->
    <el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
    ...
    </el-form>
  </el-dialog>

注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
:visible.sync=“dialogFormVisible”

注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
@close=“dialogClose”

3.表单

3.1 基本结构

...

注1：:label-position设置表单对齐方式
注2：设置表单元素属性双向绑定的对象属性名称

   data: function() {
   return {
           bookForm: {
	   id: null,
	   bookname: null,
	   price: '',
	   booktype: null
       }
       };
   }

3.2 表单验证

  <el-form :model="bookForm" :rules="rules" ref="bookForm">
     ...
  </el-form>

注1：:rules="rules"表单验证定义，只需要通过 rules 属性传入约定的验证规则

   //将el-form-item的prop属性设置为需校验的字段名即可,如下：
   <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
      <el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
   </el-form-item>

   //在Vue实例的data属性中定义表单验证规则，如下：
   rules: {
   bookname: [
      {required: true,message: '请输入书本名称！',trigger: 'blur'},
      {min: 3,max: 6,message: '长度必须在3-6个字符之间',trigger: 'blur'}
   ],
       ...
   }

注2：有多个表单，怎么在提交进行区分？

   我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
   所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用

注3：清空表单验证信息

   this.$refs[formName].resetFields();

   补充说明：formName是指<el-form ref="bookForm">中定义的ref属性名

注4：表单重置时必须先清空表单验证信息，再清空表单数据信息

   //通过form表单的ref属性来清空表单验证信息
   this.$refs['bookForm'].resetFields();
   //清空上一次表单的数据信息
   this.bookForm.id = null;
   this.bookForm.bookname = null;
   this.bookForm.price = null;
   this.bookForm.booktype = null;

2.1 新增

在事件中设置dialogFormVisible="true"即可打开dialog弹出框

2.2 添加修改/删除按钮

2.3 在上使用特殊的slot-scope 特性，可以接收传递给插槽的prop

slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取row对象信息和行索引index信息即可

代码部分

<!-- 编辑窗体 -->
		<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>

加rules的验证

rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入文章内容',
						trigger: 'blur'
					}]
				}

新增页面

<template>
	<div>
		<!-- 搜索框 -->
		<el-form :inline="true" :model="formInline">
			<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" @click="search">查询</el-button>
				<el-button size="small" type="primary" @click="handleAdd">新增</el-button>
			</el-form-item>

		</el-form>
		<!-- 表格数据 -->
		<el-table size="small" :data="listData" style="width: 100%">
			<el-table-column align="center" type="selection" min-width="1">

			</el-table-column>
			<el-table-column prop="id" label="文章id" min-width="1">
			</el-table-column>
			<el-table-column prop="title" label="文章标题" min-width="2">
			</el-table-column>
			<el-table-column prop="body" label="文章内容" min-width="3">
			</el-table-column>
			 <el-table-column label="操作" min-width="2">
				<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>
		</el-table>
		<!-- 
			分页条
			current-page=传输当前页
			page-sizes=传输的页码
			
		 -->
		<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,
				editForm: {
					id: 0,
					title: '',
					body: ''
				},
				/* 是否打开窗体，默认关闭 */
				editFormVisible: false,
				title: '',
				rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入文章内容',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			doSearch(params) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST
				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);
				});
			},
			handleSizeChange(rows) {
				console.log("页大小发生改变" + rows)
				this.formInline.page = 1;
				this.formInline.rows = rows;
				this.search();
			},
			handleCurrentChange(page) {
				console.log("当前页发生改变" + page)
				this.formInline.page = page;
				this.search();
			},
			search() {
				this.doSearch(this.formInline);
			},
			closeDialog() {
				
			},
			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;
						}
						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;
					}
				});
			},
			/* 新增 */
			handleAdd() {
				this.clearData();
				this.editFormVisible = true;
				this.title = "新增文章"
			},
			/* 修改 */
			handleEdit(index,row){
				this.editFormVisible = true;
				this.title = "编辑文章";
				this.editForm.id=row.id;
				this.editForm.title=row.title;
				this.editForm.body=row.body;
			},
			/* 删除 */
			handleDelete(index,row){
				let url = this.axios.urls.SYSTEM_ARTICLE_DEL
				this.axios.post(url, {id:row.id}).then((response) => {
					console.log(response);
					alert('删除成功');
					//操作成功后关闭框,并自动刷新
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			},
			/* 清空数据 */
			clearData(){
				this.editFormVisible = false;
				this.title = "";
				this.editForm.id=0;
				this.editForm.title='';
				this.editForm.body='';
			}
		},

		created() {
			this.doSearch({});

		}

	}
</script>

<style>
</style>

我真的不想秃头！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CUD表单验证+增删改查

CUD表单验证目录CUD表单验证主要内容代码部分总结主要内容1.后台数据接口准备增删改接口2.Dialog弹出框2.1 基本结构 <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose">  <el-form :label-position="labelPosition" :model="bookForm" :rul
复制链接

扫一扫