当前位置：首页 > news >正文

element-ui form 组件源码分享

news 来源：原创 2025/5/9 14:15:39

form 导航菜单源码简单分享，主要从以下几个方面：

1、form 组件页面结构。

2、form 组件属性。

3、form 组件方法。

4、form 组件事件。

5、form-item 组件属性。

6、form-item 组件 slot 挂载。

7、form-item 组件方法。

一、组件页面结构。

二、组件属性。

2.1 model 表单数据对象，类型 object，无默认值。

2.2 rules 表单验证规则，类型 object，无默认值。

2.3 inline 行内表单模式，类型 boolean，默认 false。

2.4 label-position 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width，类型 string，可选值 right/left/top，默认 right。

2.5 label-width 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。类型 string，无默认值。

2.6 label-suffix 表单域标签的后缀，类型 string，无默认值。

2.7 hide-required-asterisk 是否隐藏必填字段的标签旁边的红色星号，类型 boolean，默认 false。

2.8 show-message 是否显示校验错误信息，类型 boolean，默认 true。

2.9 inline-message 是否以行内形成展示校验信息，类型 boolean，默认 false。

2.10 status-icon 是否在输入框中显示校验结果反馈图标，类型 boolean，默认 false。

2.11 validate-on-rule-change 是否在 rules 属性改变后立即触发一次校验，类型 boolean，默认 true。

2.12 size 用于控制该表单内组件的尺寸，类型 string，可选值 medium/small/mini，无默认值。

2.13 disabled 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效，类型 boolean，默认 false。

三、组件方法。

3.1 validate 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise，参数 Function(callback:Function(boolean,object))。

validate(callback) {// 检查是否设置了 model，没有设置则报错并终止验证if (!this.model) {console.warn('[Element Warn][Form]model is required for validate to work!');return;}let promise;// 如果没有传入 callback，但支持 Promise，则创建一个 Promise 实例if (typeof callback !== 'function' && window.Promise) {promise = new window.Promise((resolve, reject) => {// 将 callback 替换为 Promise 的 resolve / rejectcallback = function(valid, invalidFields) {valid ? resolve(valid) : reject(invalidFields);};});}let valid = true; // 假设表单一开始是有效的let count = 0; // 验证完成的字段计数器// 如果没有任何需要验证的字段（fields 为空），并且提供了 callback，则直接调用 callback(true)if (this.fields.length === 0 && callback) {callback(true);}let invalidFields = {}; // 存储验证失败的字段及其错误信息// 遍历所有字段进行验证this.fields.forEach((field) => {field.validate('', (message, fieldObj) => {if (message) {valid = false; // 只要有一个字段出错，整个表单就无效}// 合并当前字段的错误信息到 invalidFields 中invalidFields = objectAssign({}, invalidFields, fieldObj);// 当所有字段都验证完成后，调用最终的回调函数if (typeof callback === 'function' &&++count === this.fields.length) {callback(valid, invalidFields);}});});// 如果创建了 promise，则返回它，以便外部使用 .then()/.catch()if (promise) {return promise;}}

3.2 validateField 对部分表单字段进行校验的方法，参数 Function(props:array|string,callback:Function(errorMessage:string))。

3.3 resetFields 对整个表单进行重置，将所有字段值重置为初始化值并移除校验结果。

resetField() {// 清除当前表单项的验证状态和错误提示信息this.validateState = ''; // 验证状态：如 success / error / validating 等this.validateMessage = ''; // 错误提示信息// 获取整个表单的数据模型（model）和当前字段的路径（prop）let model = this.form.model; // 表单数据对象（即传入的 model）let value = this.fieldValue; // 当前字段的当前值let path = this.prop; // 字段路径，例如 'user.name' 或 'age'// 如果字段路径中包含冒号（:），替换为点（.）if (path.indexOf(':') !== -1) {path = path.replace(/:/, '.');}// 使用工具函数 getPropByPath 解析路径，获取该字段在 model 中的引用// 返回一个对象 { o: parentObject, k: key }，表示字段的实际存储位置let prop = getPropByPath(model, path, true);// 禁用验证this.validateDisabled = true;// 根据字段类型（数组 or 非数组）重置值为初始值（initialValue）if (Array.isArray(value)) {// 如果是数组，则复制一份 initialValue 数组赋值回去prop.o[prop.k] = [].concat(this.initialValue);} else {// 否则直接赋值 initialValueprop.o[prop.k] = this.initialValue;}// 在下一次 DOM 更新后重新启用验证this.$nextTick(() => {this.validateDisabled = false;});// 广播事件给子组件通知它们也需要重置内部状态this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);},