vue中动态添加删除表单，加入校验

weixin_42255542

已于 2024-04-24 08:59:43 修改

阅读量364

点赞数

分类专栏： element-ui vue js 文章标签： vue.js javascript 前端

于 2022-08-22 14:57:32 首次发布

本文链接：https://blog.csdn.net/weixin_42255542/article/details/126465581

版权

vue 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

element-ui

11 篇文章 1 订阅

订阅专栏

// 表单结构
form: {
	list: [
		{
			name: '',
			unit: '', // 单位
			add: '', // 地址
			startTime: '', // 开始时间
			endTime: '', //
			remark: '' // 描述
		}
	]
},

<el-form ref="form" :model="form" class="tableForm" size="medium">
	<div v-for="(item, index) in form.list" :key="index + '_form'">
		<div class="flex item1-btn">
			<el-button type="primary" @click="handleForm('add', index)">添加</el-button>
			<el-button v-if="index > 0" type="danger" @click="handleForm('delete', index)"
				>删除</el-button
			>
		</div>
		<el-form-item label="名称" :prop="`list[${index}].name`" :rules="requiredRule" :show-message="false">
			<el-input v-model="item.name" placeholder="请输入" clearable maxlength="50" show-word-limit></el-input>
		</el-form-item>
		<el-form-item label="单位" :prop="`list[${index}].unit`" :rules="requiredRule" :show-message="false">
			<el-input v-model="item.unit" placeholder="请输入" clearable maxlength="50" show-word-limit></el-input>
		</el-form-item>
		<el-form-item label="地址" :prop="`list[${index}].add`" :rules="requiredRule" :show-message="false">
			<el-input v-model="item.add" placeholder="请输入" clearable maxlength="200" show-word-limit></el-input>
		</el-form-item>
		<el-form-item label="开始时间" :prop="`list[${index}].startTime`" :rules="requiredRule" :show-message="false">
			<el-date-picker
				v-model="item.startTime"
				type="date"
				value-format="yyyy-MM-dd"
				placeholder="请选择"
				:picker-options="pickerOptions(index, 'start')"
			></el-date-picker>
		</el-form-item>
		<el-form-item label="结束时间" :prop="`list[${index}].endTime`" :rules="requiredRule" :show-message="false">
			<el-date-picker
				v-model="item.endTime"
				type="date"
				value-format="yyyy-MM-dd"
				placeholder="请选择"
				:picker-options="pickerOptions(index, 'end')"
			></el-date-picker>
		</el-form-item>
		<el-form-item label="概述" :prop="`list[${index}].remark`" :rules="requiredRule" :show-message="false">
			<el-input
				v-model="item.remark"
				type="textarea"
				placeholder="请输入"
				:autosize="{ minRows: 4 }"
				maxlength="3000"
				show-word-limit
			></el-input>
		</el-form-item>
	</div>
</el-form>