fixed #433

examples/routers/form.vue

@@ -1,21 +1,32 @@
 <template>
     <div>
         <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
-            <Form-item prop="name">
+            <Form-item label-for="autocomplete" prop="name">
                 <span slot="label"><Icon type="ionic"></Icon></span>
-                <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
+                <AutoComplete element-id="autocomplete" v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
             </Form-item>
             <Form-item label="邮箱" prop="mail">
                 <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
                 <ColorPicker v-model="formValidate.mail"></ColorPicker>
             </Form-item>
-            <Form-item label="城市" prop="city">
+            <Form-item label-for="select"  label="城市" prop="city">
-                <Select v-model="formValidate.city" placeholder="请选择所在地">
+                <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">
@@ -45,8 +56,8 @@
                     <Checkbox label="看电影"></Checkbox>
                 </Checkbox-group>
             </Form-item>
-            <Form-item label="介绍" prop="desc">
+            <Form-item label-for="input" label="介绍" prop="desc">
-                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
+                <Input element-id="input" v-model="formValidate.desc" type="text" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
             </Form-item>
             <Form-item>
                 <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
@@ -83,6 +94,53 @@
     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: [],
@@ -172,7 +230,9 @@
                     interest: [],
                     date: '',
                     time: '',
-                    desc: ''
+                    desc: '',
+                    cascader: [],
+                    inputnumber: 1
                 },
                 ruleValidate: {
                     name: [

src/components/auto-complete/auto-complete.vue

@@ -15,6 +15,7 @@
         :transfer="transfer">
         <slot name="input">
             <i-input
+                :element-id="elementId"
                 ref="input"
                 slot="input"
                 v-model="currentValue"
@@ -85,6 +86,9 @@
             },
             name: {
                 type: String
+            },
+            elementId: {
+                type: String
             }
         },
         data () {

src/components/cascader/cascader.vue

@@ -4,6 +4,7 @@
             <input type="hidden" :name="name" :value="currentValue">
             <slot>
                 <i-input
+                    :element-id="elementId"
                     ref="input"
                     :readonly="!filterable"
                     :disabled="disabled"
@@ -131,6 +132,9 @@
             },
             name: {
                 type: String
+            },
+            elementId: {
+                type: String
             }
         },
         data () {

src/components/date-picker/picker.vue

@@ -3,6 +3,7 @@
         <div ref="reference" :class="[prefixCls + '-rel']">
             <slot>
                 <i-input
+                    :element-id="elementId"
                     :class="[prefixCls + '-editor']"
                     :readonly="!editable || readonly"
                     :disabled="disabled"
@@ -202,6 +203,9 @@
             },
             name: {
                 type: String
+            },
+            elementId: {
+                type: String
             }
         },
         data () {

src/components/form/form-item.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="classes">
-        <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label || $slots.label"><slot name="label">{{ label }}</slot></label>
+        <label :class="[prefixCls + '-label']" :for="labelFor" :style="labelStyles" v-if="label || $slots.label"><slot name="label">{{ label }}</slot></label>
         <div :class="[prefixCls + '-content']" :style="contentStyles">
             <slot></slot>
             <transition name="fade">
@@ -10,8 +10,6 @@
     </div>
 </template>
 <script>
-    // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
-
     import AsyncValidator from 'async-validator';
     import Emitter from '../../mixins/emitter';
 
@@ -70,6 +68,9 @@
             showMessage: {
                 type: Boolean,
                 default: true
+            },
+            labelFor: {
+                type: String
             }
         },
         data () {

src/components/input-number/input-number.vue

@@ -16,6 +16,7 @@
         </div>
         <div :class="inputWrapClasses">
             <input
+                :id="elementId"
                 :class="inputClasses"
                 :disabled="disabled"
                 autocomplete="off"
@@ -101,6 +102,9 @@
             },
             precision: {
                 type: Number
+            },
+            elementId: {
+                type: String
             }
         },
         data () {

src/components/input/input.vue

@@ -7,6 +7,7 @@
                 <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
             </transition>
             <input
+                :id="elementId"
                 :autocomplete="autocomplete"
                 ref="input"
                 :type="type"
@@ -30,8 +31,9 @@
             <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
         </template>
         <textarea
-            :autocomplete="autocomplete"
             v-else
+            :id="elementId"
+            :autocomplete="autocomplete"
             ref="textarea"
             :class="textareaClasses"
             :style="textareaStyles"
@@ -119,6 +121,9 @@
                     return oneOf(value, ['on', 'off']);
                 },
                 default: 'off'
+            },
+            elementId: {
+                type: String
             }
         },
         data () {

src/components/select/select.vue

@@ -13,6 +13,7 @@
                 <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span>
                 <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
                 <input
+                    :id="elementId"
                     type="text"
                     v-if="filterable"
                     v-model="query"
@@ -135,6 +136,9 @@
             },
             name: {
                 type: String
+            },
+            elementId: {
+                type: String
             }
         },
         data () {