ElementUI 表单的基本用法


前言

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>

在这里插入图片描述


官方文档

https://element.eleme.cn/#/zh-CN/component/form

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值