Skip to content

E
Element
Commit 538e2934 authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

update form docs

parent 57b33a3e
Hide whitespace changes
Inline Side-by-side
Showing with 344 additions and 558 deletions
examples/docs/form.md
View file @ 538e2934
...@@ -56,25 +56,25 @@ ...@@ -56,25 +56,25 @@
type: '', type: '',
remark: '' remark: ''
}, },
formAlignRight: {
name: '',
region: '',
type: ''
},
formAlignLeft: { formAlignLeft: {
name: '', name: '',
region: '', region: '',
type: '', type: ''
remark: ''
}, },
ruleForm: { ruleForm: {
sex: '', name: '',
user1: '', region: '',
user2: '', date1: '',
age: '', date2: '',
region: [], delivery: false,
desc: '', type: [],
mail: '' resource: '',
}, desc: ''
formNoLabel: {
username: '',
pass: '',
rememberPss: false
}, },
ruleForm2: { ruleForm2: {
pass: '', pass: '',
...@@ -85,28 +85,26 @@ ...@@ -85,28 +85,26 @@
options: [ options: [
], ],
rules: { rules: {
user1: [ name: [
{ required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' } { required: true, message: '请输入活动名称', trigger: 'blur' }
], ],
user2: [ region: [
{ required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' } { required: true, message: '请选择活动区域', trigger: 'change' }
], ],
age: [ date1: [
{ required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
{ type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' }
], ],
mail: [ date2: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
], ],
sex: [ type: [
{ required: true, message: '请选择性别' } { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
], ],
region: [ resource: [
{ type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' } { required: true, message: '请选择活动资源', trigger: 'change' }
], ],
desc: [ desc: [
{ required: true, message: '请填写个人简介', trigger: 'blur' } { required: true, message: '请填写活动形式', trigger: 'blur' }
] ]
}, },
rules2: { rules2: {
...@@ -202,9 +200,8 @@ ...@@ -202,9 +200,8 @@
<style> <style>
.demo-form { .demo-form {
.el-input, .el-form {
.el-textarea { width: 440px;
width: 360px;
} }
.line { .line {
...@@ -240,135 +237,99 @@ ...@@ -240,135 +237,99 @@
} }
} }
} }
.demo-form-normal {
.el-date-picker + .el-date-picker { width: 440px;
margin-left: 10px;
} }
} .demo-form-inline {
.demo-form-normal { .el-input {
width: 440px; width: 150px;
} }
.demo-form-inline { > * {
.el-input { margin-right: 10px;
width: 150px; }
} }
> * { .demo-form-stacked {
margin-right: 10px; width: 270px;
.el-select .el-input {
width: 100%;
}
} }
} .demo-ruleForm {
.demo-ruleForm { width: 460px;
width: 440px;
.el-input, .el-input,
.el-textarea { .el-textarea {
width: auto; width: auto;
}
} }
} .demo-dynamic {
.demo-dynamic { .el-input {
.el-input { display: inline-block;
display: inline-block; margin-right: 10px;
margin-right: 10px; width: 270px;
}
}
.fr {
float: right;
} }
}
.fr {
float: right;
} }
</style> </style>
## 基础使用 ## Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
Form 组件是一个具有校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。 ### 典型表单
<div class="demo-box demo-form demo-form-normal"> 包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
<el-form ref="form" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="配送时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="蜂鸟配送">
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio v-model="form.resource" label="线上品牌商赞助"></el-radio>
<el-radio v-model="form.resource" label="线下场地免费"></el-radio>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">立即创建</el-button>
<el-button @click.native.prevent>取消</el-button>
</el-form-item>
</el-form>
</div>
::: demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
```html ```html
<template> <el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit">
<el-form ref="form" @submit.prevent="onSubmit" label-width="80px"> <el-form-item label="活动名称">
<el-form-item label="活动名称"> <el-input v-model="form.name"></el-input>
<el-input v-model="form.name"></el-input> </el-form-item>
</el-form-item> <el-form-item label="活动区域">
<el-form-item label="活动区域"> <el-select v-model="form.region" :width="360" placeholder="请选择活动区域">
<el-select v-model="form.region" :width="360" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option>
<el-option label="区域二" value="beijing"></el-option> </el-select>
</el-select> </el-form-item>
</el-form-item> <el-form-item label="活动时间">
<el-form-item label="配送时间"> <el-col :span="11">
<el-col :span="11"> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker> </el-col>
</el-col> <el-col class="line" :span="2">-</el-col>
<el-col class="line" :span="2">-</el-col> <el-col :span="11">
<el-col :span="11"> <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
<el-time-picker type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker> </el-col>
</el-col> </el-form-item>
</el-form-item> <el-form-item label="即时配送">
<el-form-item label="蜂鸟配送"> <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
<el-switch on-text="" off-text="" :value="form.delivery"></el-switch> </el-form-item>
</el-form-item> <el-form-item label="活动性质">
<el-form-item label="活动性质"> <el-checkbox-group v-model="form.type">
<el-checkbox-group v-model="form.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group>
</el-checkbox-group> </el-form-item>
</el-form-item> <el-form-item label="特殊资源">
<el-form-item label="特殊资源"> <el-radio-group v-model="form.resource">
<el-radio v-model="form.resource" label="线上品牌商赞助"></el-radio> <el-radio label="线上品牌商赞助"></el-radio>
<el-radio v-model="form.resource" label="线下场地免费"></el-radio> <el-radio label="线下场地免费"></el-radio>
</el-form-item> </el-radio-group>
<el-form-item label="活动形式"> </el-form-item>
<el-input type="textarea" v-model="form.desc"></el-input> <el-form-item label="活动形式">
</el-form-item> <el-input type="textarea" v-model="form.desc"></el-input>
<el-form-item> </el-form-item>
<el-button type="primary">立即创建</el-button> <el-form-item>
<el-button @click.native.prevent>取消</el-button> <el-button type="primary">立即创建</el-button>
</el-form-item> <el-button @click.native.prevent>取消</el-button>
</el-form> </el-form-item>
</template> </el-form>
<script> <script>
export default { export default {
data() { data() {
...@@ -393,39 +354,26 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -393,39 +354,26 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## Inline Form ### 行内表单
<div class="demo-box demo-form demo-form-inline"> 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
<el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
<el-form-item>
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item><el-form-item>
<el-select v-model="formInline.region" :width="150" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item><el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
::: demo Form 组件的 `type` 属性可以控制表单的类型，当设为 `inline` 时可以让表单域变为行内的表单域
```html ```html
<template> <el-form :inline="true" :model="formInline" @submit.prevent="onSubmit" class="demo-form-inline">
<el-form type="inline" :model="formInline" @submit.prevent="onSubmit"> <el-form-item>
<el-form-item> <el-input v-model="formInline.user" placeholder="审批人"></el-input>
<el-input v-model="formInline.user" placeholder="审批人"></el-input> </el-form-item><el-form-item>
</el-form-item><el-form-item> <el-select v-model="formInline.region" :width="150" placeholder="活动区域">
<el-select v-model="formInline.region" :width="150" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option>
<el-option label="区域二" value="beijing"></el-option> </el-select>
</el-select> </el-form-item><el-form-item>
</el-form-item><el-form-item> <el-button type="primary">查询</el-button>
<el-button type="primary">查询</el-button> </el-form-item>
</el-form-item> </el-form>
</el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
...@@ -444,57 +392,27 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -444,57 +392,27 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## Stacked Form ### 对齐方式
<div class="demo-box demo-form demo-form-stacked"> 根据具体目标和制约因素，选择最佳的标签对齐方式。
<el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
<el-form-item label="名称">
<el-input v-model="formStacked.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formStacked.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动展开形式">
<el-input v-model="formStacked.type"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formStacked.remark"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">立即创建</el-button>
<el-button @click.native.prevent>取消</el-button>
</el-form-item>
</el-form>
</div>
顶部对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
```html ```html
<template> <el-form label-position="top" :model="formStacked" class="demo-form-stacked">
<el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit"> <el-form-item label="名称">
<el-form-item label="名称"> <el-input v-model="formStacked.name"></el-input>
<el-input v-model="formStacked.name"></el-input> </el-form-item>
</el-form-item> <el-form-item label="活动区域">
<el-form-item label="活动区域"> <el-input v-model="formStacked.region"></el-input>
<el-select v-model="formStacked.region" :width="360" placeholder="请选择活动区域"> </el-form-item>
<el-option label="区域一" value="shanghai"></el-option> <el-form-item label="活动展开形式">
<el-option label="区域二" value="beijing"></el-option> <el-input v-model="formStacked.type"></el-input>
</el-select> </el-form-item>
</el-form-item> </el-form>
<el-form-item label="活动展开形式">
<el-input v-model="formStacked.type"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formStacked.remark"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">立即创建</el-button>
<el-button @click.native.prevent>取消</el-button>
</el-form-item>
</el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
...@@ -502,262 +420,166 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -502,262 +420,166 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
formStacked: { formStacked: {
name: '', name: '',
region: '', region: '',
type: '', type: ''
remark: ''
} }
}; };
},
methods: {
onSubmit() {
console.log('submit!');
}
} }
} }
</script> </script>
``` ```
:::
## 标签左对齐 右对齐
<div class="demo-box demo-form">
<el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="名称">
<el-input v-model="formAlignLeft.name"></el-input>
</el-form-item>
<el-form-item label="推广地">
<el-select v-model="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="formAlignLeft.type"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，默认不设置的情况下标签是右对齐的
```html ```html
<template> <el-form :model="formAlignRight" label-width="80px">
<el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px"> <el-form-item label="活动名称">
<el-form-item label="名称"> <el-input v-model="formAlignRight.name"></el-input>
<el-input v-model="formAlignLeft.name"></el-input> </el-form-item>
</el-form-item> <el-form-item label="推广地">
<el-form-item label="推广地"> <el-input v-model="formAlignRight.region"></el-input>
<el-select v-model="formAlignLeft.region" :width="360" placeholder="请选择活动区域"> </el-form-item>
<el-option label="区域一" value="shanghai"></el-option> <el-form-item label="活动形式">
<el-option label="区域二" value="beijing"></el-option> <el-input v-model="formAlignRight.type"></el-input>
</el-select> </el-form-item>
</el-form-item> </el-form>
<el-form-item label="活动形式">
<el-input v-model="formAlignLeft.type"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
return { return {
formAlignLeft: { formAlignRight: {
name: '', name: '',
region: '', region: '',
type: '' type: ''
} }
}; };
},
methods: {
onSubmit() {
console.log('submit!');
}
} }
} }
</script> </script>
``` ```
:::
## 无标签 左对齐
<div class="demo-box demo-form">
<el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
<el-form-item>
<el-input v-model="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="fr">登录</el-button>
<el-checkbox v-model="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
</el-form-item>
</el-form>
</div>
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `left` 时标签会变为左对齐
```html ```html
<template> <el-form :model="formAlignLeft" label-position="left" @submit.prevent="onSubmit" label-width="80px">
<el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;"> <el-form-item label="活动名称">
<el-form-item> <el-input v-model="formAlignLeft.name"></el-input>
<el-input v-model="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input> </el-form-item>
</el-form-item> <el-form-item label="推广地">
<el-form-item> <el-input v-model="formAlignLeft.region"></el-input>
<el-input v-model="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input> </el-form-item>
</el-form-item> <el-form-item label="活动形式">
<el-form-item> <el-input v-model="formAlignLeft.type"></el-input>
<el-button type="primary" class="fr">登录</el-button> </el-form-item>
<el-checkbox v-model="formNoLabel.rememberPss" label="记住密码"></el-checkbox> </el-form>
</el-form-item>
</el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
return { return {
formNoLabel: { formAlignLeft: {
username: '', name: '',
pass: '', region: '',
rememberPss: false type: ''
} }
}; };
},
methods: {
onSubmit() {
console.log('submit!');
}
} }
} }
</script> </script>
``` ```
:::
## 表单验证 ### 表单验证
<div class="demo-box demo-form demo-ruleForm"> 在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
<el-form-item label="用户名" :required="true">
<el-col :span="11">
<el-form-item prop="user1">
<el-input v-model="ruleForm.user1" placeholder="First Name"></el-input>
</el-form-item>
</el-col>
<el-col :span="2"><div class="line">-</div></el-col>
<el-col :span="11">
<el-form-item prop="user2">
<el-input v-model="ruleForm.user2" placeholder="Last Name"></el-input>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="ruleForm.age" :number="true"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="mail">
<el-input v-model="ruleForm.mail"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="ruleForm.sex">
<el-radio label="男" name="sex"></el-radio>
<el-radio label="女" name="sex"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="简介" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item label="地区" prop="region" placeholder="请选择地区">
<el-checkbox-group v-model="ruleForm.region">
<el-checkbox label="BeiJing" name="region"></el-checkbox>
<el-checkbox label="ShangHai" name="region"></el-checkbox>
<el-checkbox label="ShenZhen" name="region"></el-checkbox>
<el-checkbox label="GuangZhou" name="region"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.native.prevent="handleSubmit">提交</el-button>
<el-button @click.native.prevent="handleReset">重置</el-button>
</el-form-item>
</el-form>
</div>
::: demo Form 组件提供了表单验证的功能，只需要通过 `rule` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属相设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
```html ```html
<template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px"> <el-form-item label="活动名称" prop="name">
<el-form-item label="用户名" :required="true"> <el-input v-model="ruleForm.name"></el-input>
<el-col :span="11"> </el-form-item>
<el-form-item prop="user1"> <el-form-item label="活动区域" prop="region">
<el-input v-model="ruleForm.user1" placeholder="First Name"></el-input> <el-select v-model="ruleForm.region" :width="360" placeholder="请选择活动区域">
</el-form-item> <el-option label="区域一" value="shanghai"></el-option>
</el-col> <el-option label="区域二" value="beijing"></el-option>
<el-col :span="2"><div class="line">-</div></el-col> </el-select>
<el-col :span="11"> </el-form-item>
<el-form-item prop="user2"> <el-form-item label="活动时间">
<el-input v-model="ruleForm.user2" placeholder="Last Name"></el-input> <el-col :span="11">
</el-form-item> <el-form-item prop="date1">
</el-col> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="年龄" prop="age"> </el-col>
<el-input v-model="ruleForm.age" :number="true"></el-input> <el-col class="line" :span="2">-</el-col>
</el-form-item> <el-col :span="11">
<el-form-item label="邮箱" prop="mail"> <el-form-item prop="date2">
<el-input v-model="ruleForm.mail"></el-input> <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item> </el-form-item>
<el-form-item label="性别" prop="sex"> </el-col>
<el-radio-group v-model="ruleForm.sex"> </el-form-item>
<el-radio label="男" name="sex"></el-radio> <el-form-item label="即时配送">
<el-radio label="女" name="sex"></el-radio> <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
</el-radio-group> </el-form-item>
</el-form-item> <el-form-item label="活动性质" prop="type">
<el-form-item label="简介" prop="desc"> <el-checkbox-group v-model="ruleForm.type">
<el-input type="textarea" v-model="ruleForm.desc"></el-input> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
</el-form-item> <el-checkbox label="地推活动" name="type"></el-checkbox>
<el-form-item label="地区" prop="region" placeholder="请选择地区"> <el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox-group v-model="ruleForm.region"> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
<el-checkbox label="BeiJing" name="region"></el-checkbox> </el-checkbox-group>
<el-checkbox label="ShangHai" name="region"></el-checkbox> </el-form-item>
<el-checkbox label="ShenZhen" name="region"></el-checkbox> <el-form-item label="特殊资源" prop="resource">
<el-checkbox label="GuangZhou" name="region"></el-checkbox> <el-radio-group v-model="ruleForm.resource">
</el-checkbox-group> <el-radio label="线上品牌商赞助"></el-radio>
</el-form-item> <el-radio label="线下场地免费"></el-radio>
<el-form-item> </el-radio-group>
<el-button type="primary" @click.prevent="handleSubmit">提交</el-button> </el-form-item>
<el-button @click.prevent="handleReset">重置</el-button> <el-form-item label="活动形式" prop="desc">
</el-form-item> <el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form> </el-form-item>
</template> <el-form-item>
<el-button type="primary" @click.native.prevent="handleSubmit">立即创建</el-button>
<el-button @click.native.prevent="handleReset">重置</el-button>
</el-form-item>
</el-form>
<script> <script>
export default { export default {
data() { data() {
return { return {
ruleForm: { ruleForm: {
sex: '', name: '',
user1: '', region: '',
user2: '', date1: '',
age: '', date2: '',
region: [], delivery: false,
desc: '', type: [],
mail: '' resource: '',
desc: ''
}, },
rules: { rules: {
user1: [ name: [
{ required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' } { required: true, message: '请输入活动名称', trigger: 'blur' }
], ],
user2: [ region: [
{ required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' } { required: true, message: '请选择活动区域', trigger: 'change' }
], ],
age: [ date1: [
{ required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
{ type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' }
], ],
mail: [ date2: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
], ],
sex: [ type: [
{ required: true, message: '请选择性别' } { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
], ],
region: [ resource: [
{ type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' } { required: true, message: '请选择活动资源', trigger: 'change' }
], ],
desc: [ desc: [
{ required: true, message: '请填写个人简介', trigger: 'blur' } { required: true, message: '请填写活动形式', trigger: 'blur' }
] ]
} }
}; };
...@@ -780,45 +602,27 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -780,45 +602,27 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## 自定义校验规则 ### 自定义校验规则
<div class="demo-box demo-form demo-ruleForm">
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="80px">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.native.prevent="handleSubmit2">提交</el-button>
<el-button @click.native.prevent="handleReset2">重置</el-button>
</el-form-item>
</el-form>
</div>
::: demo 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证
```html ```html
<template> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="80px"> <el-form-item label="密码" prop="pass">
<el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input> </el-form-item>
</el-form-item> <el-form-item label="确认密码" prop="checkPass">
<el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input> </el-form-item>
</el-form-item> <el-form-item label="年龄" prop="age">
<el-form-item label="年龄" prop="age"> <el-input v-model="ruleForm2.age"></el-input>
<el-input v-model="ruleForm2.age"></el-input> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-button type="primary" @click.native.prevent="handleSubmit2">提交</el-button>
<el-button type="primary" @click.native.prevent="handleSubmit2">提交</el-button> <el-button @click.native.prevent="handleReset2">重置</el-button>
<el-button @click.native.prevent="handleReset2">重置</el-button> </el-form-item>
</el-form-item> </el-form>
</el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
...@@ -896,61 +700,35 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -896,61 +700,35 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## 动态增减表单项 ### 动态增减表单项
<div class="demo-box demo-form demo-dynamic">
<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="80px">
<el-form-item prop="email" label="邮箱">
<el-input v-model="dynamicForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains:' + index"
:rules="{
type: 'object', required: true,
fields: {
value: { required: true, message: '域名不能为空', trigger: 'blur' }
}
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.native.prevent="handleSubmit3">提交</el-button>
<el-button @click.native.prevent="addDomain">新增域名</el-button>
</el-form-item>
</el-form>
</div>
::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
```html ```html
<template> <el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="100px" class="demo-dynamic">
<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="80px"> <el-form-item prop="email" label="邮箱">
<el-form-item prop="email" label="邮箱"> <el-input v-model="dynamicForm.email"></el-input>
<el-input v-model="dynamicForm.email"></el-input> </el-form-item>
</el-form-item> <el-form-item
<el-form-item v-for="(domain, index) in dynamicForm.domains"
v-for="(domain, index) in dynamicForm.domains" :label="'域名' + index"
:label="'域名' + index" :key="domain.key"
:key="domain.key" :prop="'domains:' + index"
:prop="'domains:' + index" :rules="{
:rules="{ type: 'object', required: true,
type: 'object', required: true, fields: {
fields: { value: { required: true, message: '域名不能为空', trigger: 'blur' }
value: { required: true, message: '域名不能为空', trigger: 'blur' } }
} }"
}" >
> <el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button>
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button> </el-form-item>
</el-form-item> <el-form-item>
<el-form-item> <el-button type="primary" @click.native.prevent="handleSubmit3">提交</el-button>
<el-button type="primary" @click.native.prevent="handleSubmit3">提交</el-button> <el-button @click.native.prevent="addDomain">新增域名</el-button>
<el-button @click.native.prevent="addDomain">新增域名</el-button> </el-form-item>
</el-form-item> </el-form>
</el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
...@@ -997,31 +775,32 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -997,31 +775,32 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## el-form API ### Form Attributes
### 组件属性和事件
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| model | 表单数据对象 | object | | | | model | 表单数据对象 | object | — | — |
| rules | 表单验证规则 | object | | | | rules | 表单验证规则 | object | — | — |
| type | 表单类型 | string | stacked, inline, horizontal | horizontal | | type | 表单类型 | string | stacked, inline, horizontal | horizontal |
| label-align | 表单域标签的水平对齐位置 | string | right,left | right | | label-align | 表单域标签的水平对齐位置 | string | right,left | right |
| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | | | | label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | | | | label-suffix | 表单域标签的后缀 | string | — | — |
### Form Methods
### el-form 实例属性和方法 | 方法名 | 说明 |
|---------- |-------------- |
| validate(cb) | 对整个表单进行校验的方法 |
| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
| 方法名 | 说明 | 类型 | 默认值 | ### Form-Item Attributes
|---------- |-------------- |---------- |-------- |
| validate(cb) | 对整个表单进行校验的方法, 校验结束后会调用传入的回调方法, cb(valid), valid 参数是校验 bool 值结果 | function | |
| validateField(prop, cb) | 对部分表单字段进行校验的方法 | | |
| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | | |
## el-form-item API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| prop | 表单域model字段 | string | 传入父级 v-form 的 model 中的所有属性 | | | prop | 表单域 model 字段 | string | 传入 Form 组件的 `model` 中的字段 | — |
| label | 标签文本 | string | | | | label | 标签文本 | string | — | — |
| label-width | 表单域标签的的宽度，例如 '50px' | string | | | | label-width | 表单域标签的的宽度，例如 '50px' | string | — | — |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | | false | | required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
packages/date-picker/src/picker.vue
View file @ 538e2934
...@@ -34,6 +34,7 @@ import Vue from 'vue'; ...@@ -34,6 +34,7 @@ import Vue from 'vue';
import Clickoutside from 'main/utils/clickoutside'; import Clickoutside from 'main/utils/clickoutside';
import { merge, formatDate, parseDate, getWeekNumber } from './util'; import { merge, formatDate, parseDate, getWeekNumber } from './util';
import Popper from 'main/utils/popper'; import Popper from 'main/utils/popper';
import emitter from 'main/mixins/emitter';
const FUNCTION_KEYS = [13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40]; const FUNCTION_KEYS = [13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40];
const RANGE_SEPARATOR = ' - '; const RANGE_SEPARATOR = ' - ';
...@@ -178,6 +179,8 @@ const TYPE_VALUE_RESOLVER_MAP = { ...@@ -178,6 +179,8 @@ const TYPE_VALUE_RESOLVER_MAP = {
}; };
export default { export default {
mixins: [emitter],
props: { props: {
format: String, format: String,
readonly: Boolean, readonly: Boolean,
...@@ -200,6 +203,9 @@ export default { ...@@ -200,6 +203,9 @@ export default {
watch: { watch: {
pickerVisible(val) { pickerVisible(val) {
val === true ? this.showPicker() : this.hidePicker(); val === true ? this.showPicker() : this.hidePicker();
},
value(val) {
this.dispatch('form-item', 'el.form.change');
} }
}, },
...@@ -284,6 +290,7 @@ export default { ...@@ -284,6 +290,7 @@ export default {
handleBlur() { handleBlur() {
this.$emit('blur', this); this.$emit('blur', this);
this.dispatch('form-item', 'el.form.blur');
}, },
handleKeydown(event) { handleKeydown(event) {
......
packages/form/package.json
View file @ 538e2934
...@@ -12,6 +12,6 @@ ...@@ -12,6 +12,6 @@
"author": "haiping.zeng<haiping.zeng@ele.me>", "author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"async-validator": "^1.6.5" "async-validator": "^1.6.6"
} }
} }
packages/form/src/form.vue
View file @ 538e2934
<template> <template>
<form :class="[ <form class="el-form" :class="[
type ? 'el-form-' + type : 'el-form', labelPosition ? 'el-form--label-' + labelPosition : '',
{ 'is-label-left': labelAlign === 'left' } { 'el-form--inline': inline }
]"> ]">
<slot></slot> <slot></slot>
</form> </form>
...@@ -16,12 +16,13 @@ ...@@ -16,12 +16,13 @@
model: Object, model: Object,
rules: Object, rules: Object,
type: String, type: String,
labelAlign: String, labelPosition: String,
labelWidth: String, labelWidth: String,
labelSuffix: { labelSuffix: {
type: String, type: String,
default: '' default: ''
} },
inline: Boolean
}, },
data() { data() {
return { return {
......
packages/theme-default/src/form.css
View file @ 538e2934
...@@ -3,11 +3,28 @@ ...@@ -3,11 +3,28 @@
@component-namespace el { @component-namespace el {
@b form { @b form {
@when label-left { @m label-left {
& .el-form-item__label { & .el-form-item__label {
text-align: left; text-align: left;
} }
} }
@m label-top {
& .el-form-item__label {
float: none;
display: inline-block;
padding: 0 0 10px 0;
}
}
@m inline {
& .el-form-item {
display: inline-block;
margin-right: 10px;
> * {
vertical-align: top;
}
}
}
} }
@b form-item { @b form-item {
margin-bottom: 22px; margin-bottom: 22px;
...@@ -67,22 +84,4 @@ ...@@ -67,22 +84,4 @@
} }
} }
} }
@b form-inline {
& .el-form-item {
display: inline-block;
margin-right: 10px;
> * {
vertical-align: top;
}
}
}
@b form-stacked {
& .el-form-item__label {
float: none;
display: inline-block;
padding: 0 0 10px 0;
}
}
} }
packages/theme-default/src/switch.css
View file @ 538e2934
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
border-radius: 15px; border-radius: 15px;
transition: transform .3s; transition: transform .3s;
size: 16px; size: 16px;
z-index: 100; z-index: 20;
background-color: var(--color-white); background-color: var(--color-white);
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment