From 9725f3758000b368ebcca8683f5e7bdeadf8b9a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 17 Sep 2019 09:32:13 +0800
Subject: [PATCH] update form demo

---
 examples/routers/form.vue | 869 +++++++++++++++++---------------------
 1 file changed, 381 insertions(+), 488 deletions(-)

diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index b08ad139..0dcaaa3c 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -1,502 +1,395 @@
-<!--<template>-->
-    <!--<div>-->
-        <!--<Tabs type="card">-->
-          <!--<TabPane label="默认大小">-->
-            <!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
-                <!--<Form-item label-for="autocomplete" prop="name">-->
-                    <!--<span slot="label"><Icon type="ionic"></Icon></span>-->
-                    <!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search"></AutoComplete>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="input" label="介绍" prop="desc">-->
-                    <!--<Input element-id="input" icon="ios-search" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="邮箱" prop="mail">-->
-                    <!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
-                    <!--<ColorPicker v-model="formValidate.mail"></ColorPicker>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="select"  label="城市" prop="city">-->
-                    <!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地">-->
-                        <!--<Option value="beijing">北京市</Option>-->
-                        <!--<Option value="shanghai">上海市</Option>-->
-                        <!--<Option value="shenzhen">深圳市</Option>-->
-                    <!--</Select>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="date" label="选择日期" prop="date">-->
-                    <!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
-                    <!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader"></Cascader>-->
-                <!--</Form-item>-->
-
-                <!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
-                    <!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber"></InputNumber>-->
-                <!--</Form-item>-->
-
-                <!--<Form-item label="选择日期">-->
-                    <!--<Row>-->
-                        <!--<Col span="11">-->
-                        <!--<Form-item prop="date">-->
-                            <!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>-->
-                        <!--</Form-item>-->
-                        <!--</Col>-->
-                        <!--<Col span="2" style="text-align: center">-</Col>-->
-                        <!--<Col span="11">-->
-                        <!--<Form-item prop="time">-->
-                            <!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>-->
-                        <!--</Form-item>-->
-                        <!--</Col>-->
-                    <!--</Row>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="性别" prop="gender">-->
-                    <!--<Radio-group v-model="formValidate.gender">-->
-                        <!--<Radio label="male">男</Radio>-->
-                        <!--<Radio label="female">女</Radio>-->
-                    <!--</Radio-group>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="爱好" prop="interest">-->
-                    <!--<Checkbox-group v-model="formValidate.interest">-->
-                        <!--<Checkbox label="吃饭"></Checkbox>-->
-                        <!--<Checkbox label="睡觉"></Checkbox>-->
-                        <!--<Checkbox label="跑步"></Checkbox>-->
-                        <!--<Checkbox label="看电影"></Checkbox>-->
-                    <!--</Checkbox-group>-->
-                <!--</Form-item>-->
-                <!--<Form-item>-->
-                    <!--<Button type="primary" @click="handleSubmit('formValidate')" icon="ios-cloud-upload-outline">提交</Button>-->
-                    <!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" icon="ios-reload">重置</Button>-->
-                <!--</Form-item>-->
-            <!--</Form>-->
-          <!--</TabPane>-->
-          <!--<TabPane label="小表单">-->
-            <!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
-                <!--<Form-item label-for="autocomplete" prop="name">-->
-                    <!--<span slot="label"><Icon type="ionic"></Icon></span>-->
-                    <!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="small"></AutoComplete>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="input" label="介绍" prop="desc">-->
-                    <!--<Input element-id="input" icon="ios-search" size="small" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="邮箱" prop="mail">-->
-                    <!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
-                    <!--<ColorPicker v-model="formValidate.mail" size="small"></ColorPicker>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="select"  label="城市" prop="city">-->
-                    <!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="small">-->
-                        <!--<Option value="beijing">北京市</Option>-->
-                        <!--<Option value="shanghai">上海市</Option>-->
-                        <!--<Option value="shenzhen">深圳市</Option>-->
-                    <!--</Select>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="date" label="选择日期" prop="date">-->
-                    <!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
-                    <!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="small"></Cascader>-->
-                <!--</Form-item>-->
-
-                <!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
-                    <!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="small"></InputNumber>-->
-                <!--</Form-item>-->
-
-                <!--<Form-item label="选择日期">-->
-                    <!--<Row>-->
-                        <!--<Col span="11">-->
-                        <!--<Form-item prop="date">-->
-                            <!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="small"></Date-picker>-->
-                        <!--</Form-item>-->
-                        <!--</Col>-->
-                        <!--<Col span="2" style="text-align: center">-</Col>-->
-                        <!--<Col span="11">-->
-                        <!--<Form-item prop="time">-->
-                            <!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="small"></Time-picker>-->
-                        <!--</Form-item>-->
-                        <!--</Col>-->
-                    <!--</Row>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="性别" prop="gender">-->
-                    <!--<Radio-group v-model="formValidate.gender" size="small">-->
-                        <!--<Radio label="male">男</Radio>-->
-                        <!--<Radio label="female">女</Radio>-->
-                    <!--</Radio-group>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="爱好" prop="interest" size="small">-->
-                    <!--<Checkbox-group v-model="formValidate.interest">-->
-                        <!--<Checkbox label="吃饭"></Checkbox>-->
-                        <!--<Checkbox label="睡觉"></Checkbox>-->
-                        <!--<Checkbox label="跑步"></Checkbox>-->
-                        <!--<Checkbox label="看电影"></Checkbox>-->
-                    <!--</Checkbox-group>-->
-                <!--</Form-item>-->
-                <!--<Form-item>-->
-                    <!--<Button type="primary" @click="handleSubmit('formValidate')" size="small" icon="ios-cloud-upload-outline">提交</Button>-->
-                    <!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="small" icon="ios-reload">重置</Button>-->
-                <!--</Form-item>-->
-            <!--</Form>-->
-          <!--</TabPane>-->
-          <!--<TabPane label="大表单">-->
-            <!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">-->
-                <!--<Form-item label-for="autocomplete" prop="name">-->
-                    <!--<span slot="label"><Icon type="ionic"></Icon></span>-->
-                    <!--<AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名" icon="ios-search" size="large"></AutoComplete>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="input" label="介绍" prop="desc">-->
-                    <!--<Input element-id="input" icon="ios-search" size="large" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="邮箱" prop="mail">-->
-                    <!--&lt;!&ndash;<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>&ndash;&gt;-->
-                    <!--<ColorPicker v-model="formValidate.mail" size="large"></ColorPicker>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="select"  label="城市" prop="city">-->
-                    <!--<Select element-id="select" filterable v-model="formValidate.city" placeholder="请选择所在地" size="large">-->
-                        <!--<Option value="beijing">北京市</Option>-->
-                        <!--<Option value="shanghai">上海市</Option>-->
-                        <!--<Option value="shenzhen">深圳市</Option>-->
-                    <!--</Select>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="date" label="选择日期" prop="date">-->
-                    <!--<Date-picker element-id="date" type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>-->
-                <!--</Form-item>-->
-                <!--<Form-item label-for="cascader" label="级联选择" prop="cascader">-->
-                    <!--<Cascader elementId="cascader" :data="dataCascader" v-model="formValidate.cascader" size="large"></Cascader>-->
-                <!--</Form-item>-->
-
-                <!--<Form-item label-for="inputnumber" label="数字框" prop="inputnumber">-->
-                    <!--<InputNumber elementId="inputnumber" :max="10" :min="1" v-model="formValidate.inputnumber" size="large"></InputNumber>-->
-                <!--</Form-item>-->
-
-                <!--<Form-item label="选择日期">-->
-                    <!--<Row>-->
-                        <!--<Col span="11">-->
-                        <!--<Form-item prop="date">-->
-                            <!--<Date-picker type="date" placeholder="选择日期" v-model="formValidate.date" size="large"></Date-picker>-->
-                        <!--</Form-item>-->
-                        <!--</Col>-->
-                        <!--<Col span="2" style="text-align: center">-</Col>-->
-                        <!--<Col span="11">-->
-                        <!--<Form-item prop="time">-->
-                            <!--<Time-picker type="time" placeholder="选择时间" v-model="formValidate.time" size="large"></Time-picker>-->
-                        <!--</Form-item>-->
-                        <!--</Col>-->
-                    <!--</Row>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="性别" prop="gender">-->
-                    <!--<Radio-group v-model="formValidate.gender" size="large">-->
-                        <!--<Radio label="male">男</Radio>-->
-                        <!--<Radio label="female">女</Radio>-->
-                    <!--</Radio-group>-->
-                <!--</Form-item>-->
-                <!--<Form-item label="爱好" prop="interest" size="large">-->
-                    <!--<Checkbox-group v-model="formValidate.interest">-->
-                        <!--<Checkbox label="吃饭"></Checkbox>-->
-                        <!--<Checkbox label="睡觉"></Checkbox>-->
-                        <!--<Checkbox label="跑步"></Checkbox>-->
-                        <!--<Checkbox label="看电影"></Checkbox>-->
-                    <!--</Checkbox-group>-->
-                <!--</Form-item>-->
-                <!--<Form-item>-->
-                    <!--<Button type="primary" @click="handleSubmit('formValidate')" size="large" icon="ios-cloud-upload-outline">提交</Button>-->
-                    <!--<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px" size="large" icon="ios-reload">重置</Button>-->
-                <!--</Form-item>-->
-            <!--</Form>-->
-          <!--</TabPane>-->
-        <!--</Tabs>-->
-
-
-        <!--<div style="margin: 100px">-->
-            <!--<form action="/">-->
-                <!--<Input name="f1"></Input>-->
-                <!--<i-switch name="f2" :true-value="1" :false-value="2"></i-switch>-->
-                <!--<Select v-model="model1" multiple style="width:200px" name="f3">-->
-                    <!--<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
-                <!--</Select>-->
-                <!--<AutoComplete-->
-                        <!--v-model="value1"-->
-                        <!--:data="data1"-->
-                        <!--@on-search="handleSearch1"-->
-                        <!--placeholder="input here"-->
-                        <!--name="f4"-->
-                        <!--style="width:200px"></AutoComplete>-->
-                <!--<Slider v-model="value11" name="f5"></Slider>-->
-                <!--<DatePicker type="date" placeholder="选择日期" style="width: 200px" name="f6"></DatePicker>-->
-                <!--<TimePicker type="time" placeholder="选择时间" style="width: 168px" name="f7"></TimePicker>-->
-                <!--<Cascader :data="datac" v-model="valuec" name="f8"></Cascader>-->
-                <!--<Rate v-model="valuer" name="f9"></Rate>-->
-                <!--<ColorPicker v-model="color" name="f10" />-->
-                <!--<button type="submit">test</button>-->
-            <!--</form>-->
-        <!--</div>-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--dataCascader: [{-->
-                    <!--value: 'beijing',-->
-                    <!--label: '北京',-->
-                    <!--children: [-->
-                        <!--{-->
-                            <!--value: 'gugong',-->
-                            <!--label: '故宫'-->
-                        <!--},-->
-                        <!--{-->
-                            <!--value: 'tiantan',-->
-                            <!--label: '天坛'-->
-                        <!--},-->
-                        <!--{-->
-                            <!--value: 'wangfujing',-->
-                            <!--label: '王府井'-->
-                        <!--}-->
-                    <!--]-->
-                <!--}, {-->
-                    <!--value: 'jiangsu',-->
-                    <!--label: '江苏',-->
-                    <!--children: [-->
-                        <!--{-->
-                            <!--value: 'nanjing',-->
-                            <!--label: '南京',-->
-                            <!--children: [-->
-                                <!--{-->
-                                    <!--value: 'fuzimiao',-->
-                                    <!--label: '夫子庙',-->
-                                <!--}-->
-                            <!--]-->
-                        <!--},-->
-                        <!--{-->
-                            <!--value: 'suzhou',-->
-                            <!--label: '苏州',-->
-                            <!--children: [-->
-                                <!--{-->
-                                    <!--value: 'zhuozhengyuan',-->
-                                    <!--label: '拙政园',-->
-                                <!--},-->
-                                <!--{-->
-                                    <!--value: 'shizilin',-->
-                                    <!--label: '狮子林',-->
-                                <!--}-->
-                            <!--]-->
-                        <!--}-->
-                    <!--],-->
-                <!--}],-->
-                <!--color: '#19be6b',-->
-                <!--valuer: 3,-->
-                <!--valuec: [],-->
-                <!--datac: [{-->
-                    <!--value: 'beijing',-->
-                    <!--label: '北京',-->
-                    <!--children: [-->
-                        <!--{-->
-                            <!--value: 'gugong',-->
-                            <!--label: '故宫'-->
-                        <!--},-->
-                        <!--{-->
-                            <!--value: 'tiantan',-->
-                            <!--label: '天坛'-->
-                        <!--},-->
-                        <!--{-->
-                            <!--value: 'wangfujing',-->
-                            <!--label: '王府井'-->
-                        <!--}-->
-                    <!--]-->
-                <!--}, {-->
-                    <!--value: 'jiangsu',-->
-                    <!--label: '江苏',-->
-                    <!--children: [-->
-                        <!--{-->
-                            <!--value: 'nanjing',-->
-                            <!--label: '南京',-->
-                            <!--children: [-->
-                                <!--{-->
-                                    <!--value: 'fuzimiao',-->
-                                    <!--label: '夫子庙',-->
-                                <!--}-->
-                            <!--]-->
-                        <!--},-->
-                        <!--{-->
-                            <!--value: 'suzhou',-->
-                            <!--label: '苏州',-->
-                            <!--children: [-->
-                                <!--{-->
-                                    <!--value: 'zhuozhengyuan',-->
-                                    <!--label: '拙政园',-->
-                                <!--},-->
-                                <!--{-->
-                                    <!--value: 'shizilin',-->
-                                    <!--label: '狮子林',-->
-                                <!--}-->
-                            <!--]-->
-                        <!--}-->
-                    <!--],-->
-                <!--}],-->
-                <!--value1: '',-->
-                <!--value11: 25,-->
-                <!--data1: [],-->
-                <!--cityList: [-->
-                    <!--{-->
-                        <!--value: 'beijing',-->
-                        <!--label: '北京市'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'shanghai',-->
-                        <!--label: '上海市'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'shenzhen',-->
-                        <!--label: '深圳市'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'hangzhou',-->
-                        <!--label: '杭州市'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'nanjing',-->
-                        <!--label: '南京市'-->
-                    <!--},-->
-                    <!--{-->
-                        <!--value: 'chongqing',-->
-                        <!--label: '重庆市'-->
-                    <!--}-->
-                <!--],-->
-                <!--model1: [],-->
-                <!--name: '',-->
-                <!--formValidate: {-->
-                    <!--name: '',-->
-                    <!--mail: '',-->
-                    <!--city: '',-->
-                    <!--gender: '',-->
-                    <!--interest: [],-->
-                    <!--date: '',-->
-                    <!--time: '',-->
-                    <!--desc: '',-->
-                    <!--cascader: [],-->
-                    <!--inputnumber: 1-->
-                <!--},-->
-                <!--ruleValidate: {-->
-                    <!--name: [-->
-                        <!--{ required: true, message: '姓名不能为空', trigger: 'change' }-->
-                    <!--],-->
-                    <!--mail: [-->
-                        <!--{ required: true, message: '邮箱不能为空', trigger: 'change' }-->
-                    <!--],-->
-                    <!--city: [-->
-                        <!--{ required: true, message: '请选择城市', trigger: 'change' }-->
-                    <!--],-->
-                    <!--gender: [-->
-                        <!--{ required: true, message: '请选择性别', trigger: 'change' }-->
-                    <!--],-->
-                    <!--interest: [-->
-                        <!--{ required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },-->
-                        <!--{ type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }-->
-                    <!--],-->
-                    <!--date: [-->
-                        <!--{ required: true, type: 'date', message: '请选择日期', trigger: 'change' }-->
-                    <!--],-->
-                    <!--time: [-->
-                        <!--{ required: true, type: 'date', message: '请选择时间', trigger: 'change' }-->
-                    <!--],-->
-                    <!--desc: [-->
-                        <!--{ required: true, message: '请输入个人介绍', trigger: 'blur' },-->
-                        <!--{ type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }-->
-                    <!--]-->
-                <!--}-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--handleSubmit (name) {-->
-                <!--this.$refs[name].validate((valid) => {-->
-                    <!--if (valid) {-->
-                        <!--this.$Message.success('提交成功!');-->
-                    <!--} else {-->
-                        <!--this.$Message.error('表单验证失败!');-->
-                    <!--}-->
-                <!--})-->
-            <!--},-->
-            <!--handleReset (name) {-->
-                <!--this.$refs[name].resetFields();-->
-            <!--},-->
-            <!--handleSearch1 (value) {-->
-                <!--this.data1 = !value ? [] : [-->
-                    <!--value,-->
-                    <!--value + value,-->
-                    <!--value + value + value-->
-                <!--];-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
-
-
 <template>
-    <Form :model="formItem" :label-width="80">
-        <FormItem label="Input">
-            <Input v-model="formItem.input" placeholder="Enter something..."></Input>
-        </FormItem>
-        <FormItem label="Select">
-            <Select v-model="formItem.select">
+    <div style="margin: 100px;">
+        <row :gutter="64">
+            <i-col span="12">
+                <Form ref="formValidate1" :model="formValidate" :rules="ruleValidate" :label-width="80">
+                    <FormItem label="Name" prop="name">
+                        <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
+                    </FormItem>
+                    <FormItem label="E-mail" prop="mail">
+                        <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
+                    </FormItem>
+                    <FormItem label="City" prop="city">
+                        <Select v-model="formValidate.city" placeholder="Select your city">
+                            <Option value="beijing">New York</Option>
+                            <Option value="shanghai">London</Option>
+                            <Option value="shenzhen">Sydney</Option>
+                        </Select>
+                    </FormItem>
+                    <FormItem label="Date">
+                        <Row>
+                            <Col span="11">
+                                <FormItem prop="date">
+                                    <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
+                                </FormItem>
+                            </Col>
+                            <Col span="2" style="text-align: center">-</Col>
+                            <Col span="11">
+                                <FormItem prop="time">
+                                    <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
+                                </FormItem>
+                            </Col>
+                        </Row>
+                    </FormItem>
+                    <FormItem label="Gender" prop="gender">
+                        <RadioGroup v-model="formValidate.gender">
+                            <Radio label="male">Male</Radio>
+                            <Radio label="female">Female</Radio>
+                        </RadioGroup>
+                    </FormItem>
+                    <FormItem label="Hobby" prop="interest">
+                        <CheckboxGroup v-model="formValidate.interest">
+                            <Checkbox label="Eat"></Checkbox>
+                            <Checkbox label="Sleep"></Checkbox>
+                            <Checkbox label="Run"></Checkbox>
+                            <Checkbox label="Movie"></Checkbox>
+                        </CheckboxGroup>
+                    </FormItem>
+                    <FormItem label="Desc" prop="desc">
+                        <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
+                    </FormItem>
+                    <FormItem label="Switch" prop="switch">
+                        <i-switch v-model="formValidate.switch"></i-switch>
+                    </FormItem>
+                    <FormItem label="Slider" prop="slider">
+                        <Slider v-model="formValidate.slider"></Slider>
+                    </FormItem>
+                    <FormItem label="AutoComplete" prop="autoComplete">
+                        <AutoComplete
+                                v-model="formValidate.autoComplete"
+                                :data="data1"
+                                @on-search="handleSearch1"
+                                placeholder="input here"
+                                style="width:200px"></AutoComplete>
+                    </FormItem>
+                    <FormItem label="cascader" prop="cascader">
+                        <Cascader v-model="formValidate.cascader" :data="data2"></Cascader>
+                    </FormItem>
+                    <FormItem label="inputNumber" prop="inputNumber">
+                        <InputNumber :max="10" :min="1" v-model="formValidate.inputNumber"></InputNumber>
+                    </FormItem>
+                    <FormItem label="rate" prop="rate">
+                        <Rate v-model="formValidate.rate" />
+                    </FormItem>
+                    <FormItem label="colorPicker" prop="colorPicker">
+                        <ColorPicker v-model="formValidate.colorPicker" />
+                    </FormItem>
+                    <FormItem label="upload" prop="upload">
+                        <Upload action="//jsonplaceholder.typicode.com/posts/">
+                            <Button icon="ios-cloud-upload-outline">Upload files</Button>
+                        </Upload>
+                    </FormItem>
+                    <FormItem>
+                        <Button type="primary" @click="handleSubmit('formValidate1')">Submit</Button>
+                        <Button @click="handleReset('formValidate1')" style="margin-left: 8px">Reset</Button>
+                    </FormItem>
+                </Form>
+            </i-col>
+            <i-col span="12">
+                <Form disabled ref="formValidate2" :model="formValidate" :rules="ruleValidate" :label-width="80">
+                    <FormItem label="Name" prop="name">
+                        <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
+                    </FormItem>
+                    <FormItem label="E-mail" prop="mail">
+                        <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
+                    </FormItem>
+                    <FormItem label="City" prop="city">
+                        <Select v-model="formValidate.city" placeholder="Select your city">
+                            <Option value="beijing">New York</Option>
+                            <Option value="shanghai">London</Option>
+                            <Option value="shenzhen">Sydney</Option>
+                        </Select>
+                    </FormItem>
+                    <FormItem label="Date">
+                        <Row>
+                            <Col span="11">
+                                <FormItem prop="date">
+                                    <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
+                                </FormItem>
+                            </Col>
+                            <Col span="2" style="text-align: center">-</Col>
+                            <Col span="11">
+                                <FormItem prop="time">
+                                    <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
+                                </FormItem>
+                            </Col>
+                        </Row>
+                    </FormItem>
+                    <FormItem label="Gender" prop="gender">
+                        <RadioGroup v-model="formValidate.gender">
+                            <Radio label="male">Male</Radio>
+                            <Radio label="female">Female</Radio>
+                        </RadioGroup>
+                    </FormItem>
+                    <FormItem label="Hobby" prop="interest">
+                        <CheckboxGroup v-model="formValidate.interest">
+                            <Checkbox label="Eat"></Checkbox>
+                            <Checkbox label="Sleep"></Checkbox>
+                            <Checkbox label="Run"></Checkbox>
+                            <Checkbox label="Movie"></Checkbox>
+                        </CheckboxGroup>
+                    </FormItem>
+                    <FormItem label="Desc" prop="desc">
+                        <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
+                    </FormItem>
+                    <FormItem label="Switch" prop="switch">
+                        <i-switch v-model="formValidate.switch"></i-switch>
+                    </FormItem>
+                    <FormItem label="Slider" prop="slider">
+                        <Slider v-model="formValidate.slider"></Slider>
+                    </FormItem>
+                    <FormItem label="AutoComplete" prop="autoComplete">
+                        <AutoComplete
+                                v-model="formValidate.autoComplete"
+                                :data="data1"
+                                @on-search="handleSearch1"
+                                placeholder="input here"
+                                style="width:200px"></AutoComplete>
+                    </FormItem>
+                    <FormItem label="cascader" prop="cascader">
+                        <Cascader v-model="formValidate.cascader" :data="data2"></Cascader>
+                    </FormItem>
+                    <FormItem label="inputNumber" prop="inputNumber">
+                        <InputNumber :max="10" :min="1" v-model="formValidate.inputNumber"></InputNumber>
+                    </FormItem>
+                    <FormItem label="rate" prop="rate">
+                        <Rate v-model="formValidate.rate" />
+                    </FormItem>
+                    <FormItem label="colorPicker" prop="colorPicker">
+                        <ColorPicker v-model="formValidate.colorPicker" />
+                    </FormItem>
+                    <FormItem label="upload" prop="upload">
+                        <Upload action="//jsonplaceholder.typicode.com/posts/">
+                            <Button icon="ios-cloud-upload-outline">Upload files</Button>
+                        </Upload>
+                    </FormItem>
+                    <FormItem>
+                        <Button type="primary" @click="handleSubmit('formValidate2')">Submit</Button>
+                        <Button @click="handleReset('formValidate2')" style="margin-left: 8px">Reset</Button>
+                    </FormItem>
+                </Form>
+            </i-col>
+        </row>
+        <div style="margin: 100px;width: 200px;">
+            <Divider>普通组件</Divider>
+            <Button>123</Button>
+            <Button disabled>123</Button>
+            <br>
+            <Input value="" />
+            <Input value="" disabled />
+            <br>
+            <Radio :value="false">Radio</Radio>
+            <Radio :value="false" disabled>Radio</Radio>
+            <RadioGroup value="爪哇犀牛">
+                <Radio label="金斑蝶"></Radio>
+                <Radio label="爪哇犀牛"></Radio>
+                <Radio label="印度黑羚"></Radio>
+            </RadioGroup>
+            <RadioGroup value="爪哇犀牛">
+                <Radio label="金斑蝶" disabled></Radio>
+                <Radio label="爪哇犀牛"></Radio>
+                <Radio label="印度黑羚"></Radio>
+            </RadioGroup>
+            <br>
+            <Checkbox :value="false">Checkbox</Checkbox>
+            <Checkbox :value="false" disabled>Checkbox</Checkbox>
+            <CheckboxGroup :value="['香蕉']">
+                <Checkbox label="香蕉"></Checkbox>
+                <Checkbox label="苹果" disabled></Checkbox>
+                <Checkbox label="西瓜"></Checkbox>
+            </CheckboxGroup>
+            <br>
+            <i-switch :value="false" />
+            <i-switch :value="false" disabled />
+            <br>
+            <Select value="London" disabled style="width:200px">
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <Select value="London" style="width:200px">
                 <Option value="beijing">New York</Option>
-                <Option value="shanghai">London</Option>
+                <Option value="shanghai" disabled>London</Option>
                 <Option value="shenzhen">Sydney</Option>
             </Select>
-        </FormItem>
-        <FormItem label="DatePicker">
-            <Row>
-                <Col span="11">
-                <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
-                </Col>
-                <Col span="2" style="text-align: center">-</Col>
-                <Col span="11">
-                <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
-                </Col>
-            </Row>
-        </FormItem>
-        <FormItem label="Radio">
-            <RadioGroup v-model="formItem.radio">
-                <Radio label="male">Male</Radio>
-                <Radio label="female">Female</Radio>
-            </RadioGroup>
-        </FormItem>
-        <FormItem label="Checkbox">
-            <CheckboxGroup v-model="formItem.checkbox">
-                <Checkbox label="Eat"></Checkbox>
-                <Checkbox label="Sleep"></Checkbox>
-                <Checkbox label="Run"></Checkbox>
-                <Checkbox label="Movie"></Checkbox>
-            </CheckboxGroup>
-        </FormItem>
-        <FormItem label="Switch">
-            <i-switch v-model="formItem.switch" size="large">
-                <span slot="open">On</span>
-                <span slot="close">Off</span>
-            </i-switch>
-        </FormItem>
-        <FormItem label="Slider">
-            <Slider v-model="formItem.slider" range></Slider>
-        </FormItem>
-        <FormItem label="Text">
-            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
-        </FormItem>
-        <FormItem>
-            <Button type="primary">Submit</Button>
-            <Button type="primary" ghost style="margin-left: 8px">Cancel</Button>
-        </FormItem>
-        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-    </Form>
+            <Select value="" filterable>
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <Select value="" filterable disabled>
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <br>
+            <Slider :value="20"></Slider>
+            <Slider :value="20" disabled></Slider>
+            <br>
+            <AutoComplete
+                    v-model="value1"
+                    :data="data1"
+                    @on-search="handleSearch1"
+                    placeholder="input here"
+                    style="width:200px"></AutoComplete>
+            <AutoComplete
+                    v-model="value1"
+                    :data="data1"
+                    @on-search="handleSearch1"
+                    placeholder="input here"
+                    disabled
+                    style="width:200px"></AutoComplete>
+            <br>
+            <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
+            <DatePicker type="date" placeholder="Select date" style="width: 200px" disabled></DatePicker>
+            <br>
+            <TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
+            <TimePicker type="time" placeholder="Select time" style="width: 168px" disabled></TimePicker>
+            <br>
+            <Cascader :data="data2"></Cascader>
+            <Cascader :data="data2" disabled></Cascader>
+            <br>
+            <InputNumber :max="10" :min="1" :value="2"></InputNumber>
+            <InputNumber :max="10" :min="1" :value="2" disabled></InputNumber>
+            <br>
+            <Rate :value="3" />
+            <Rate :value="3" disabled />
+            <br>
+            <ColorPicker value="#19be6b" />
+            <ColorPicker value="#19be6b" disabled />
+            <br>
+            <Upload action="//jsonplaceholder.typicode.com/posts/">
+                <Button icon="ios-cloud-upload-outline">Upload files</Button>
+            </Upload>
+            <Upload action="//jsonplaceholder.typicode.com/posts/" disabled>
+                <Button icon="ios-cloud-upload-outline">Upload files</Button>
+            </Upload>
+        </div>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                formItem: {
-                    input: '',
-                    select: '',
-                    radio: 'male',
-                    checkbox: [],
-                    switch: true,
+                value1: '',
+                data1: [],
+                formValidate: {
+                    name: '',
+                    mail: '',
+                    city: '',
+                    gender: '',
+                    interest: [],
                     date: '',
                     time: '',
-                    slider: [20, 50],
-                    textarea: ''
-                }
+                    desc: '',
+                    switch: false,
+                    slider: 20,
+                    autoComplete: '',
+                    cascader: [],
+                    inputNumber: 2,
+                    rate: 3,
+                    colorPicker: ''
+                },
+                ruleValidate: {
+                    name: [
+                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
+                    ],
+                    slider: [
+                        { required: true, type: 'number', message: 'Slider', trigger: 'change' }
+                    ],
+                    switch: [
+                        { required: true, type: 'boolean', message: 'Switch...', trigger: 'change' }
+                    ],
+                    mail: [
+                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
+                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
+                    ],
+                    city: [
+                        { required: true, message: 'Please select the city', trigger: 'change' }
+                    ],
+                    gender: [
+                        { required: true, message: 'Please select gender', trigger: 'change' }
+                    ],
+                    interest: [
+                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
+                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
+                    ],
+                    date: [
+                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
+                    ],
+                    time: [
+                        { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
+                    ],
+                    desc: [
+                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
+                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
+                    ]
+                },
+                cityList: [
+                    {
+                        value: 'New York',
+                        label: 'New York'
+                    },
+                    {
+                        value: 'London',
+                        label: 'London'
+                    },
+                    {
+                        value: 'Sydney',
+                        label: 'Sydney'
+                    },
+                    {
+                        value: 'Ottawa',
+                        label: 'Ottawa'
+                    },
+                    {
+                        value: 'Paris',
+                        label: 'Paris'
+                    },
+                    {
+                        value: 'Canberra',
+                        label: 'Canberra'
+                    }
+                ],
+                data2: [{
+                    value: 'zhejiang',
+                    label: '浙江',
+                    children: [{
+                        value: 'hangzhou',
+                        label: '杭州',
+                        children: [{
+                            value: 'xihu',
+                            label: '西湖'
+                        }]
+                    }]
+                }, {
+                    value: 'jiangsu',
+                    label: '江苏',
+                    disabled: true,
+                    children: [{
+                        value: 'nanjing',
+                        label: '南京',
+                        children: [{
+                            value: 'zhonghuamen',
+                            label: '中华门'
+                        }]
+                    }]
+                }]
+            }
+        },
+        methods: {
+            handleSubmit (name) {
+                this.$refs[name].validate((valid) => {
+                    if (valid) {
+                        this.$Message.success('Success!');
+                    } else {
+                        this.$Message.error('Fail!');
+                    }
+                })
+            },
+            handleReset (name) {
+                this.$refs[name].resetFields();
+            },
+            handleSearch1 (value) {
+                this.data1 = !value ? [] : [
+                    value,
+                    value + value,
+                    value + value + value
+                ];
             }
         }
     }