文章目录
ElementUI表单
el的表单官网内容很多,看了一眼觉得心累了。但实际上它使用起来非常的方便,el为我们封装了各种组件,样式也大众。
一个简单的案例

代码如下(使用时确保引入了相关的组件)
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名"><!-- form-item用于显示关联的文件 -->
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="form.pwd"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
pwd:''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
看起来还是挺多行是吗去掉些必要标签还有些声明,剩下的是:el-form,el-input,el-form-item三个组件。el-form是必要的,对布局有影响,el-form-item是做为关联表单元素的文字

本文详细介绍了ElementUI中的表单使用,包括一个简单的表单案例、主要的表单组件、组件的使用方法、行内表单、对齐方式、表单验证、自定义验证规则、表单内组件尺寸控制、form模块的属性和方法。此外,还讲解了form-item模块的重要属性,如prop、label、rules等,帮助开发者更好地理解和运用ElementUI的表单功能。
最低0.47元/天 解锁文章
2869

被折叠的 条评论
为什么被折叠?



