element form源码

form.vue

复制代码<template> <form class="el-form" :class="[ labelPosition ? 'el-form--label-' + labelPosition : '', { 'el-form--inline': inline } ]"> <slot></slot> </form> </template> <script> import objectAssign from 'element-ui/src/utils/merge'; export default { name: 'ElForm', componentName: 'ElForm', // 注入自身,子孙组件接收不管层级多深 provide() { return { elForm: this }; }, props: { // model 表单数据对象 model: Object, // rules 表单验证规则 rules: Object, // 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width labelPosition: String, // 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 labelWidth: String, // 表单域标签的后缀 labelSuffix: { type: String, default: '' }, inline: Boolean, // 是否以行内形式展示校验信息 inlineMessage: Boolean, // 是否在输入框中显示校验结果反馈图标 statusIcon: Boolean, // 是否显示校验错误信息 showMessage: { type: Boolean, default: true }, // 用于控制该表单内组件的尺寸 size: String, // 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 disabled: Boolean, // 是否在 rules 属性改变后立即触发一次验证 validateOnRuleChange: { type: Boolean, default: true }, // 是否显示必填字段的标签旁边的红色星号 hideRequiredAsterisk: { type: Boolean, default: false } }, watch: { rules() { // remove then add event listeners on form-item after form rules change this.fields.forEach(field => { field.removeValidateEvents(); field.addValidateEvents(); }); if (this.validateOnRuleChange) { this.validate(() => {}); } } }, computed: { autoLabelWidth() { if (!this.potentialLabelWidthArr.length) return 0; const max = Math.max(...this.potentialLabelWidthArr); return max ? `${max}px` : ''; } }, data() { return { fields: [], potentialLabelWidthArr: [] // use this array to calculate auto width }; }, created() { // 接收子组件添加rule验证事件 this.$on('el.form.addField', (field) => { if (field) { this.fields.push(field); } }); /* istanbul ignore next */ // 移除严重事件监听 this.$on('el.form.removeField', (field) => { if (field.prop) { this.fields.splice(this.fields.indexOf(field), 1); } }); }, methods: { // 重置验证 resetFields() { if (!this.model) { console.warn('[Element Warn][Form]model is required for resetFields to work.'); return; } this.fields.forEach(field => { // 每项都重置 field.resetField(); }); }, // 关闭验证 clearValidate(props = []) { const fields = props.length ? (typeof props === 'string' ? this.fields.filter(field => props === field.prop) : this.fields.filter(field => props.indexOf(field.prop) > -1) ) : this.fields; fields.forEach(field => { field.clearValidate(); }); }, validate(callback) { if (!this.model) { console.warn('[Element Warn][Form]model is required for validate to work!'); return; } let promise; // if no callback, return promise if (typeof callback !== 'function' && window.Promise) { promise = new window.Promise((resolve, reject) => { callback = function(valid) { valid ? resolve(valid) : reject(valid); }; }); } let valid = true; let count = 0; // 如果需要验证的fields为空，调用验证时立刻返回callback if (this.fields.length === 0 && callback) { callback(true); } let invalidFields = {}; this.fields.forEach(field => { field.validate('', (message, field) => { if (message) { valid = false; } invalidFields = objectAssign({}, invalidFields, field); if (typeof callback === 'function' && ++count === this.fields.length) { callback(valid, invalidFields); } }); }); if (promise) { return promise; } }, validateField(props, cb) { props = [].concat(props); const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1); if (!fields.length) { console.warn('[Element Warn]please pass correct props!'); return; } fields.forEach(field => { field.validate('', cb); }); }, // 获取label的下标 getLabelWidthIndex(width) { const index = this.potentialLabelWidthArr.indexOf(width); // it's impossible if (index === -1) { throw new Error('[ElementForm]unpected width ', width); } return index; }, // 重置labelwidth registerLabelWidth(val, oldVal) { if (val && oldVal) { const index = this.getLabelWidthIndex(oldVal); this.potentialLabelWidthArr.splice(index, 1, val); } else if (val) { this.potentialLabelWidthArr.push(val); } }, // 移除此宽度 deregisterLabelWidth(val) { const index = this.getLabelWidthIndex(val); this.potentialLabelWidthArr.splice(index, 1); } } }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<template>
  <form class="el-form" :class="[
    labelPosition ? 'el-form--label-' + labelPosition : '',
    { 'el-form--inline': inline }
  ]">
    <slot></slot>
  </form>
</template>
<script>
  import objectAssign from 'element-ui/src/utils/merge';

  export default {
    name: 'ElForm',

    componentName: 'ElForm',
    // 注入自身,子孙组件接收不管层级多深
    provide() {
      return {
        elForm: this
      };
    },

    props: {
      // model    表单数据对象
      model: Object,
      // rules    表单验证规则
      rules: Object,
      // 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
      labelPosition: String,
      // 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
      labelWidth: String,
      // 表单域标签的后缀
      labelSuffix: {
        type: String,
        default: ''
      },
      inline: Boolean,
      // 是否以行内形式展示校验信息
      inlineMessage: Boolean,
      // 是否在输入框中显示校验结果反馈图标
      statusIcon: Boolean,
      // 是否显示校验错误信息
      showMessage: {
        type: Boolean,
        default: true
      },
      // 用于控制该表单内组件的尺寸
      size: String,
      // 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
      disabled: Boolean,
      // 是否在 rules 属性改变后立即触发一次验证
      validateOnRuleChange: {
        type: Boolean,
        default: true
      },
      // 是否显示必填字段的标签旁边的红色星号
      hideRequiredAsterisk: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      rules() {
        // remove then add event listeners on form-item after form rules change
        this.fields.forEach(field => {
          field.removeValidateEvents();
          field.addValidateEvents();
        });

        if (this.validateOnRuleChange) {
          this.validate(() => {});
        }
      }
    },
    computed: {
      autoLabelWidth() {
        if (!this.potentialLabelWidthArr.length) return 0;
        const max = Math.max(...this.potentialLabelWidthArr);
        return max ? `${max}px` : '';
      }
    },
    data() {
      return {
        fields: [],
        potentialLabelWidthArr: [] // use this array to calculate auto width
      };
    },
    created() {
      // 接收子组件添加rule验证事件
      this.$on('el.form.addField', (field) => {
        if (field) {
          this.fields.push(field);
        }
      });
      /* istanbul ignore next */
      // 移除严重事件监听
      this.$on('el.form.removeField', (field) => {
        if (field.prop) {
          this.fields.splice(this.fields.indexOf(field), 1);
        }
      });
    },
    methods: {
      // 重置验证
      resetFields() {
        if (!this.model) {
          console.warn('[Element Warn][Form]model is required for resetFields to work.');
          return;
        }
        this.fields.forEach(field => {
          // 每项都重置
          field.resetField();
        });
      },
      // 关闭验证
      clearValidate(props = []) {
        const fields = props.length
          ? (typeof props === 'string'
            ? this.fields.filter(field => props === field.prop)
            : this.fields.filter(field => props.indexOf(field.prop) > -1)
          ) : this.fields;
        fields.forEach(field => {
          field.clearValidate();
        });
      },
      validate(callback) {
        if (!this.model) {
          console.warn('[Element Warn][Form]model is required for validate to work!');
          return;
        }

        let promise;
        // if no callback, return promise
        if (typeof callback !== 'function' && window.Promise) {
          promise = new window.Promise((resolve, reject) => {
            callback = function(valid) {
              valid ? resolve(valid) : reject(valid);
            };
          });
        }

        let valid = true;
        let count = 0;
        // 如果需要验证的fields为空，调用验证时立刻返回callback
        if (this.fields.length === 0 && callback) {
          callback(true);
        }
        let invalidFields = {};
        this.fields.forEach(field => {
          field.validate('', (message, field) => {
            if (message) {
              valid = false;
            }
            invalidFields = objectAssign({}, invalidFields, field);
            if (typeof callback === 'function' && ++count === this.fields.length) {
              callback(valid, invalidFields);
            }
          });
        });

        if (promise) {
          return promise;
        }
      },
      validateField(props, cb) {
        props = [].concat(props);
        const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1);
        if (!fields.length) {
          console.warn('[Element Warn]please pass correct props!');
          return;
        }

        fields.forEach(field => {
          field.validate('', cb);
        });
      },
      // 获取label的下标
      getLabelWidthIndex(width) {
        const index = this.potentialLabelWidthArr.indexOf(width);
        // it's impossible
        if (index === -1) {
          throw new Error('[ElementForm]unpected width ', width);
        }
        return index;
      },
      // 重置labelwidth
      registerLabelWidth(val, oldVal) {
        if (val && oldVal) {
          const index = this.getLabelWidthIndex(oldVal);
          this.potentialLabelWidthArr.splice(index, 1, val);
        } else if (val) {
          this.potentialLabelWidthArr.push(val);
        }
      },
      // 移除此宽度
      deregisterLabelWidth(val) {
        const index = this.getLabelWidthIndex(val);
        this.potentialLabelWidthArr.splice(index, 1);
      }
    }
  };
</script>

label-warp.vue

复制代码<script> export default { props: { isAutoWidth: Boolean, updateAll: Boolean }, // 接收el-form和el-form-item inject: ['elForm', 'elFormItem'], render() { const slots = this.$slots.default; if (!slots) return null; if (this.isAutoWidth) { const autoLabelWidth = this.elForm.autoLabelWidth; const style = {}; if (autoLabelWidth && autoLabelWidth !== 'auto') { const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth; if (marginLeft) { style.marginLeft = marginLeft + 'px'; } } return (<div class="el-form-item__label-wrap" style={style}> { slots } </div>); } else { return slots[0]; } }, methods: { // 获取第一个元素的宽度 getLabelWidth() { if (this.$el && this.$el.firstElementChild) { const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width; return Math.ceil(parseFloat(computedWidth)); } else { return 0; } }, updateLabelWidth(action = 'update') { if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) { if (action === 'update') { // 第一个元素宽度座位此组件的宽度 this.computedWidth = this.getLabelWidth(); } else if (action === 'remove') { // 调用父组件方法 this.elForm.deregisterLabelWidth(this.computedWidth); } } } }, watch: { // 检测computedWidth变化 computedWidth(val, oldVal) { if (this.updateAll) { // 更新父组件label this.elForm.registerLabelWidth(val, oldVal); // 更新当前item的label this.elFormItem.updateComputedLabelWidth(val); } } }, data() { return { computedWidth: 0 }; }, mounted() { this.updateLabelWidth('update'); }, updated() { this.updateLabelWidth('update'); }, beforeDestroy() { this.updateLabelWidth('remove'); } }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script>

export default {
  props: {
    isAutoWidth: Boolean,
    updateAll: Boolean
  },
  // 接收el-form和el-form-item
  inject: ['elForm', 'elFormItem'],

  render() {
    const slots = this.$slots.default;
    if (!slots) return null;
    if (this.isAutoWidth) {
      const autoLabelWidth = this.elForm.autoLabelWidth;
      const style = {};
      if (autoLabelWidth && autoLabelWidth !== 'auto') {
        const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
        if (marginLeft) {
          style.marginLeft = marginLeft + 'px';
        }
      }
      return (<div class="el-form-item__label-wrap" style={style}>
        { slots }
      </div>);
    } else {
      return slots[0];
    }
  },

  methods: {
    // 获取第一个元素的宽度
    getLabelWidth() {
      if (this.$el && this.$el.firstElementChild) {
        const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
        return Math.ceil(parseFloat(computedWidth));
      } else {
        return 0;
      }
    },
    updateLabelWidth(action = 'update') {
      if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
        if (action === 'update') {
          // 第一个元素宽度座位此组件的宽度
          this.computedWidth = this.getLabelWidth();
        } else if (action === 'remove') {
          // 调用父组件方法
          this.elForm.deregisterLabelWidth(this.computedWidth);
        }
      }
    }
  },

  watch: {
    // 检测computedWidth变化
    computedWidth(val, oldVal) {
      if (this.updateAll) {
        // 更新父组件label
        this.elForm.registerLabelWidth(val, oldVal);
        // 更新当前item的label
        this.elFormItem.updateComputedLabelWidth(val);
      }
    }
  },

  data() {
    return {
      computedWidth: 0
    };
  },

  mounted() {
    this.updateLabelWidth('update');
  },

  updated() {
    this.updateLabelWidth('update');
  },

  beforeDestroy() {
    this.updateLabelWidth('remove');
  }
};
</script>

form-item.vue

复制代码<template> <div class="el-form-item" :class="[{ 'el-form-item--feedback': elForm && elForm.statusIcon, 'is-error': validateState === 'error', 'is-validating': validateState === 'validating', 'is-success': validateState === 'success', 'is-required': isRequired || required, 'is-no-asterisk': elForm && elForm.hideRequiredAsterisk }, sizeClass ? 'el-form-item--' + sizeClass : '' ]"> <label-wrap :is-auto-width="labelStyle && labelStyle.width === 'auto'" :update-all="form.labelWidth === 'auto'"> <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label"> <slot name="label">{{label + form.labelSuffix}}</slot> </label> </label-wrap> <div class="el-form-item__content" :style="contentStyle"> <slot></slot> <transition name="el-zoom-in-top"> <slot v-if="validateState === 'error' && showMessage && form.showMessage" name="error" :error="validateMessage"> <div class="el-form-item__error" :class="{ 'el-form-item__error--inline': typeof inlineMessage === 'boolean' ? inlineMessage : (elForm && elForm.inlineMessage || false) }" > {{validateMessage}} </div> </slot> </transition> </div> </div> </template> <script> import AsyncValidator from 'async-validator'; import emitter from 'element-ui/src/mixins/emitter'; import objectAssign from 'element-ui/src/utils/merge'; import { noop, getPropByPath } from 'element-ui/src/utils/util'; import LabelWrap from './label-wrap'; export default { name: 'ElFormItem', componentName: 'ElFormItem', mixins: [emitter], provide() { return { elFormItem: this }; }, inject: ['elForm'], props: { label: String, labelWidth: String, prop: String, required: { type: Boolean, default: undefined }, rules: [Object, Array], error: String, validateStatus: String, for: String, inlineMessage: { type: [String, Boolean], default: '' }, showMessage: { type: Boolean, default: true }, size: String }, components: { // use this component to calculate auto width LabelWrap }, watch: { error: { immediate: true, handler(value) { this.validateMessage = value; this.validateState = value ? 'error' : ''; } }, // 验证状态 validateStatus(value) { this.validateState = value; } }, computed: { labelFor() { return this.for || this.prop; }, // labelStyle的样式 labelStyle() { const ret = {}; if (this.form.labelPosition === 'top') return ret; const labelWidth = this.labelWidth || this.form.labelWidth; if (labelWidth) { ret.width = labelWidth; } return ret; }, // 内容的样式 contentStyle() { const ret = {}; const label = this.label; if (this.form.labelPosition === 'top' || this.form.inline) return ret; if (!label && !this.labelWidth && this.isNested) return ret; const labelWidth = this.labelWidth || this.form.labelWidth; if (labelWidth === 'auto') { if (this.labelWidth === 'auto') { ret.marginLeft = this.computedLabelWidth; } else if (this.form.labelWidth === 'auto') { ret.marginLeft = this.elForm.autoLabelWidth; } } else { ret.marginLeft = labelWidth; } return ret; }, form() { let parent = this.$parent; let parentName = parent.$options.componentName; while (parentName !== 'ElForm') { if (parentName === 'ElFormItem') { this.isNested = true; } parent = parent.$parent; parentName = parent.$options.componentName; } return parent; }, // 获取当前项的值 fieldValue() { const model = this.form.model; if (!model || !this.prop) { return; } let path = this.prop; if (path.indexOf(':') !== -1) { path = path.replace(/:/, '.'); } return getPropByPath(model, path, true).v; }, // 是否必填 isRequired() { let rules = this.getRules(); let isRequired = false; if (rules && rules.length) { rules.every(rule => { if (rule.required) { isRequired = true; return false; } return true; }); } return isRequired; }, _formSize() { return this.elForm.size; }, elFormItemSize() { return this.size || this._formSize; }, sizeClass() { return this.elFormItemSize || (this.$ELEMENT || {}).size; } }, data() { return { validateState: '', validateMessage: '', validateDisabled: false, validator: {}, isNested: false, computedLabelWidth: '' }; }, methods: { // 验证 validate(trigger, callback = noop) { this.validateDisabled = false; // 获取触发方式是否匹配 const rules = this.getFilteredRule(trigger); if ((!rules || rules.length === 0) && this.required === undefined) { callback(); return true; } this.validateState = 'validating'; const descriptor = {}; if (rules && rules.length > 0) { rules.forEach(rule => { delete rule.trigger; }); } descriptor[this.prop] = rules; const validator = new AsyncValidator(descriptor); const model = {}; model[this.prop] = this.fieldValue; validator.validate(model, { firstFields: true }, (errors, invalidFields) => { this.validateState = !errors ? 'success' : 'error'; this.validateMessage = errors ? errors[0].message : ''; callback(this.validateMessage, invalidFields); this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null); }); }, // 清除验证 clearValidate() { this.validateState = ''; this.validateMessage = ''; this.validateDisabled = false; }, // 重置 resetField() { this.validateState = ''; this.validateMessage = ''; let model = this.form.model; let value = this.fieldValue; let path = this.prop; if (path.indexOf(':') !== -1) { path = path.replace(/:/, '.'); } let prop = getPropByPath(model, path, true); this.validateDisabled = true; if (Array.isArray(value)) { prop.o[prop.k] = [].concat(this.initialValue); } else { prop.o[prop.k] = this.initialValue; } // 通知ElTimeSelect,执行fieldReset事件,传值initialValue this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue); }, // 获取rules getRules() { let formRules = this.form.rules; // 当前组件rules,默认为空[] const selfRules = this.rules; const requiredRule = this.required !== undefined ? { required: !!this.required } : []; // 获取当前项对象 const prop = getPropByPath(formRules, this.prop || ''); formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : []; return [].concat(selfRules || formRules || []).concat(requiredRule); }, // getFilteredRule(trigger) { const rules = this.getRules(); return rules.filter(rule => { if (!rule.trigger || trigger === '') return true; if (Array.isArray(rule.trigger)) { return rule.trigger.indexOf(trigger) > -1; } else { return rule.trigger === trigger; } }).map(rule => objectAssign({}, rule)); }, // 触发失焦 onFieldBlur() { this.validate('blur'); }, onFieldChange() { if (this.validateDisabled) { this.validateDisabled = false; return; } // 触发change事件 this.validate('change'); }, updateComputedLabelWidth(width) { this.computedLabelWidth = width ? `${width}px` : ''; }, // 添加验证事件 addValidateEvents() { const rules = this.getRules(); if (rules.length || this.required !== undefined) { // 监听form表单blur事件,触发onFieldBlur this.$on('el.form.blur', this.onFieldBlur); // 监听form表单chang事件 this.$on('el.form.change', this.onFieldChange); } }, // 移除验证事件 removeValidateEvents() { this.$off(); } }, mounted() { if (this.prop) { // 通知ElForm组件el.form.addField方法,传递this this.dispatch('ElForm', 'el.form.addField', [this]); // 初始化的值 let initialValue = this.fieldValue; if (Array.isArray(initialValue)) { initialValue = [].concat(initialValue); } /** 语法： Object.defineProperty(obj, prop, descriptor) 参数说明： obj：必需。目标对象 prop：必需。需定义或修改的属性的名字 descriptor：必需。目标属性所拥有的特性 返回值： 传入函数的对象。即第一个参数obj */ // 设置初始值 Object.defineProperty(this, 'initialValue', { value: initialValue }); // 设置监听事件 this.addValidateEvents(); } }, // 销毁 beforeDestroy() { this.dispatch('ElForm', 'el.form.removeField', [this]); } }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<template>
  <div class="el-form-item" :class="[{
      'el-form-item--feedback': elForm && elForm.statusIcon,
      'is-error': validateState === 'error',
      'is-validating': validateState === 'validating',
      'is-success': validateState === 'success',
      'is-required': isRequired || required,
      'is-no-asterisk': elForm && elForm.hideRequiredAsterisk
    },
    sizeClass ? 'el-form-item--' + sizeClass : ''
  ]">
    <label-wrap
      :is-auto-width="labelStyle && labelStyle.width === 'auto'"
      :update-all="form.labelWidth === 'auto'">
      <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
        <slot name="label">{{label + form.labelSuffix}}</slot>
      </label>
    </label-wrap>
    <div class="el-form-item__content" :style="contentStyle">
      <slot></slot>
      <transition name="el-zoom-in-top">
        <slot
          v-if="validateState === 'error' && showMessage && form.showMessage"
          name="error"
          :error="validateMessage">
          <div
            class="el-form-item__error"
            :class="{
              'el-form-item__error--inline': typeof inlineMessage === 'boolean'
                ? inlineMessage
                : (elForm && elForm.inlineMessage || false)
            }"
          >
            {{validateMessage}}
          </div>
        </slot>
      </transition>
    </div>
  </div>
</template>
<script>
  import AsyncValidator from 'async-validator';
  import emitter from 'element-ui/src/mixins/emitter';
  import objectAssign from 'element-ui/src/utils/merge';
  import { noop, getPropByPath } from 'element-ui/src/utils/util';
  import LabelWrap from './label-wrap';
  export default {
    name: 'ElFormItem',

    componentName: 'ElFormItem',

    mixins: [emitter],

    provide() {
      return {
        elFormItem: this
      };
    },

    inject: ['elForm'],

    props: {
      label: String,
      labelWidth: String,
      prop: String,
      required: {
        type: Boolean,
        default: undefined
      },
      rules: [Object, Array],
      error: String,
      validateStatus: String,
      for: String,
      inlineMessage: {
        type: [String, Boolean],
        default: ''
      },
      showMessage: {
        type: Boolean,
        default: true
      },
      size: String
    },
    components: {
      // use this component to calculate auto width
      LabelWrap
    },
    watch: {
      error: {
        immediate: true,
        handler(value) {
          this.validateMessage = value;
          this.validateState = value ? 'error' : '';
        }
      },
      // 验证状态
      validateStatus(value) {
        this.validateState = value;
      }
    },
    computed: {
      labelFor() {
        return this.for || this.prop;
      },
      // labelStyle的样式
      labelStyle() {
        const ret = {};
        if (this.form.labelPosition === 'top') return ret;
        const labelWidth = this.labelWidth || this.form.labelWidth;
        if (labelWidth) {
          ret.width = labelWidth;
        }
        return ret;
      },
      // 内容的样式
      contentStyle() {
        const ret = {};
        const label = this.label;
        if (this.form.labelPosition === 'top' || this.form.inline) return ret;
        if (!label && !this.labelWidth && this.isNested) return ret;
        const labelWidth = this.labelWidth || this.form.labelWidth;
        if (labelWidth === 'auto') {
          if (this.labelWidth === 'auto') {
            ret.marginLeft = this.computedLabelWidth;
          } else if (this.form.labelWidth === 'auto') {
            ret.marginLeft = this.elForm.autoLabelWidth;
          }
        } else {
          ret.marginLeft = labelWidth;
        }
        return ret;
      },
      form() {
        let parent = this.$parent;
        let parentName = parent.$options.componentName;
        while (parentName !== 'ElForm') {
          if (parentName === 'ElFormItem') {
            this.isNested = true;
          }
          parent = parent.$parent;
          parentName = parent.$options.componentName;
        }
        return parent;
      },
      // 获取当前项的值
      fieldValue() {
        const model = this.form.model;
        if (!model || !this.prop) { return; }

        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }

        return getPropByPath(model, path, true).v;
      },
      // 是否必填
      isRequired() {
        let rules = this.getRules();
        let isRequired = false;

        if (rules && rules.length) {
          rules.every(rule => {
            if (rule.required) {
              isRequired = true;
              return false;
            }
            return true;
          });
        }
        return isRequired;
      },
      _formSize() {
        return this.elForm.size;
      },
      elFormItemSize() {
        return this.size || this._formSize;
      },
      sizeClass() {
        return this.elFormItemSize || (this.$ELEMENT || {}).size;
      }
    },
    data() {
      return {
        validateState: '',
        validateMessage: '',
        validateDisabled: false,
        validator: {},
        isNested: false,
        computedLabelWidth: ''
      };
    },
    methods: {
      // 验证
      validate(trigger, callback = noop) {
        this.validateDisabled = false;
        // 获取触发方式是否匹配
        const rules = this.getFilteredRule(trigger);
        if ((!rules || rules.length === 0) && this.required === undefined) {
          callback();
          return true;
        }

        this.validateState = 'validating';

        const descriptor = {};
        if (rules && rules.length > 0) {
          rules.forEach(rule => {
            delete rule.trigger;
          });
        }
        descriptor[this.prop] = rules;

        const validator = new AsyncValidator(descriptor);
        const model = {};

        model[this.prop] = this.fieldValue;

        validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
          this.validateState = !errors ? 'success' : 'error';
          this.validateMessage = errors ? errors[0].message : '';

          callback(this.validateMessage, invalidFields);
          this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
        });
      },
      //  清除验证
      clearValidate() {
        this.validateState = '';
        this.validateMessage = '';
        this.validateDisabled = false;
      },
      // 重置
      resetField() {
        this.validateState = '';
        this.validateMessage = '';

        let model = this.form.model;
        let value = this.fieldValue;
        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }

        let prop = getPropByPath(model, path, true);

        this.validateDisabled = true;
        if (Array.isArray(value)) {
          prop.o[prop.k] = [].concat(this.initialValue);
        } else {
          prop.o[prop.k] = this.initialValue;
        }
        // 通知ElTimeSelect,执行fieldReset事件,传值initialValue
        this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);
      },
      // 获取rules
      getRules() {
        let formRules = this.form.rules;
        // 当前组件rules,默认为空[]
        const selfRules = this.rules;
        const requiredRule = this.required !== undefined ? { required: !!this.required } : [];
        // 获取当前项对象
        const prop = getPropByPath(formRules, this.prop || '');
        formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];

        return [].concat(selfRules || formRules || []).concat(requiredRule);
      },
      // 
      getFilteredRule(trigger) {
        const rules = this.getRules();

        return rules.filter(rule => {
          if (!rule.trigger || trigger === '') return true;
          if (Array.isArray(rule.trigger)) {
            return rule.trigger.indexOf(trigger) > -1;
          } else {
            return rule.trigger === trigger;
          }
        }).map(rule => objectAssign({}, rule));
      },
      // 触发失焦
      onFieldBlur() {
        this.validate('blur');
      },
      onFieldChange() {
        if (this.validateDisabled) {
          this.validateDisabled = false;
          return;
        }
        // 触发change事件
        this.validate('change');
      },
      updateComputedLabelWidth(width) {
        this.computedLabelWidth = width ? `${width}px` : '';
      },
      // 添加验证事件
      addValidateEvents() {
        const rules = this.getRules();

        if (rules.length || this.required !== undefined) {
          // 监听form表单blur事件,触发onFieldBlur
          this.$on('el.form.blur', this.onFieldBlur);
          // 监听form表单chang事件
          this.$on('el.form.change', this.onFieldChange);
        }
      },
      // 移除验证事件
      removeValidateEvents() {
        this.$off();
      }
    },
    mounted() {
      if (this.prop) {
        // 通知ElForm组件el.form.addField方法,传递this
        this.dispatch('ElForm', 'el.form.addField', [this]);
        // 初始化的值
        let initialValue = this.fieldValue;
        if (Array.isArray(initialValue)) {
          initialValue = [].concat(initialValue);
        }
        /**
          语法：
          Object.defineProperty(obj, prop, descriptor)
          参数说明：

          obj：必需。目标对象 
          prop：必需。需定义或修改的属性的名字
          descriptor：必需。目标属性所拥有的特性
          返回值：

          传入函数的对象。即第一个参数obj
         */
        // 设置初始值
        Object.defineProperty(this, 'initialValue', {
          value: initialValue
        });
        // 设置监听事件
        this.addValidateEvents();
      }
    },
    // 销毁
    beforeDestroy() {
      this.dispatch('ElForm', 'el.form.removeField', [this]);
    }
  };
</script>