ElementUI 表单的基本用法

最新推荐文章于 2024-09-09 13:44:45 发布

一杯雪花勇闯天涯

最新推荐文章于 2024-09-09 13:44:45 发布

阅读量1.8k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/117231689

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

文章目录

前言
一.基本使用示例
官方文档

前言

ElementUI 表单的基本用法

提示：以下是本篇文章正文内容，下面案例可供参考

一.基本使用示例

1.el-form 容器，通过model绑定数据

2.el-form-item 容器，通过label绑定数据标签

3.表单组建通过v-model绑定model中的数据

1.代码示例

<template>
	<div id="app">
		<el-form v-model='data' inline>
			<el-form-item label='审批人'>
				<el-input v-model='data.user' placeholder='审批人'></el-input>
			</el-form-item>
			<el-form-item label='活动区域'>
				<el-select v-model='data.region' placeholder='活动区域'>
					<el-option label='区域1' value='beijing'></el-option>
					<el-option label='区域2' value='shanghai'></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label='活动区域'>
				<el-button type='primary' @click='onSubmit'>查询</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
v-
<script>
	export default {
		data() {

			return {
				data: {
					region: '区域二',
					user: 'sam'
				}
			}

		},
		methods: {
			onSubmit() {
                 console.log(this.data);
			}
		}
	}
</script>

<style>

</style>

在这里插入图片描述

2.表单的校验

<template>
	<div id="app">
		<el-form v-model='data' inline :rules="rules" ref='form'>
			<el-form-item label='审批人' prop='user'>
				<el-input v-model='data.user' placeholder='审批人'></el-input>
			</el-form-item>
			<el-form-item label='活动区域'>
				<el-select v-model='data.region' placeholder='活动区域'>
					<el-option label='区域1' value='beijing'></el-option>
					<el-option label='区域2' value='shanghai'></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label='活动区域'>
				<el-button type='primary' @click='onSubmit'>查询</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
		data() {
			const userValidator = (rule, value, callback) => {
				if (this.data.user.length > 3) {
					callback();
				} else {
					callback(new Error('用户名长度必须大于3个字符'));
				}
			}
			return {
				data: {
					region: '区域二',
					user: 'sam'
				},
				rules: {
					user: [{
							required: true,
							trigger: 'change',
							message: '用户名必须输入'
						},
						{
							validator: userValidator,
							trigger: 'blur',
						}
					]
				}
			}

		},
		methods: {
			onSubmit() {
				
			    this.$refs.form.validate((isValid,errors) => function() {
					
				});
				console.log(this.data);

			}
		}
	}
</script>

<style>

</style>