parent
0a419dac6a
commit
c80e54ba78
|
@ -63,6 +63,7 @@ export const FormProps = {
|
||||||
hideRequiredMark: PropTypes.bool,
|
hideRequiredMark: PropTypes.bool,
|
||||||
autoFormCreate: PropTypes.func,
|
autoFormCreate: PropTypes.func,
|
||||||
options: PropTypes.object,
|
options: PropTypes.object,
|
||||||
|
selfUpdate: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ValidationRule = {
|
export const ValidationRule = {
|
||||||
|
|
|
@ -34,6 +34,7 @@ export const FormItemProps = {
|
||||||
colon: PropTypes.bool,
|
colon: PropTypes.bool,
|
||||||
fieldDecoratorId: PropTypes.string,
|
fieldDecoratorId: PropTypes.string,
|
||||||
fieldDecoratorOptions: PropTypes.object,
|
fieldDecoratorOptions: PropTypes.object,
|
||||||
|
selfUpdate: PropTypes.bool,
|
||||||
};
|
};
|
||||||
function comeFromSlot(vnodes = [], itemVnode) {
|
function comeFromSlot(vnodes = [], itemVnode) {
|
||||||
let isSlot = false;
|
let isSlot = false;
|
||||||
|
@ -69,6 +70,11 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return { helpShow: false };
|
return { helpShow: false };
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
itemSelfUpdate() {
|
||||||
|
return !!(this.selfUpdate === undefined ? this.FormProps.selfUpdate : this.selfUpdate);
|
||||||
|
},
|
||||||
|
},
|
||||||
created() {
|
created() {
|
||||||
this.collectContext();
|
this.collectContext();
|
||||||
},
|
},
|
||||||
|
@ -448,7 +454,7 @@ export default {
|
||||||
}
|
}
|
||||||
const option = this.decoratorOption(vnode);
|
const option = this.decoratorOption(vnode);
|
||||||
if (option && option[0]) {
|
if (option && option[0]) {
|
||||||
vnodes[i] = getFieldDecorator(option[0], option[1])(vnode);
|
vnodes[i] = getFieldDecorator(option[0], option[1], this)(vnode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return vnodes;
|
return vnodes;
|
||||||
|
@ -466,7 +472,7 @@ export default {
|
||||||
let child = filterEmpty($slots.default || []);
|
let child = filterEmpty($slots.default || []);
|
||||||
if (decoratorFormProps.form && fieldDecoratorId && child.length) {
|
if (decoratorFormProps.form && fieldDecoratorId && child.length) {
|
||||||
const getFieldDecorator = decoratorFormProps.form.getFieldDecorator;
|
const getFieldDecorator = decoratorFormProps.form.getFieldDecorator;
|
||||||
child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions)(child[0]);
|
child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions, this)(child[0]);
|
||||||
warning(
|
warning(
|
||||||
!(child.length > 1),
|
!(child.length > 1),
|
||||||
'`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children',
|
'`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children',
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
| form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性,如果使用template语法,可以使用this.$form.createForm(this, options) | object | 无 |
|
| form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性,如果使用template语法,可以使用this.$form.createForm(this, options) | object | 无 |
|
||||||
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
|
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
|
||||||
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
|
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
|
||||||
|
| selfUpdate | 自定义字段更新逻辑,说明[见下](/components/form-cn/#selfUpdate),需1.3.17版本以上 | boolean | false |
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
@ -174,6 +175,7 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
|
||||||
| required | 是否必填,如不设置,则会根据校验规则自动生成 | boolean | false |
|
| required | 是否必填,如不设置,则会根据校验规则自动生成 | boolean | false |
|
||||||
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | |
|
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | |
|
||||||
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/components/grid-cn/#Col) | |
|
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/components/grid-cn/#Col) | |
|
||||||
|
| selfUpdate | 自定义字段更新逻辑,你可以通过 Form 的 selfUpdate 进行统一设置。当和 Form 同时设置时,以 Item 为准。 说明[见下](/components/form-cn/#selfUpdate) 需1.3.17版本以上 | boolean | false |
|
||||||
|
|
||||||
### 校验规则
|
### 校验规则
|
||||||
|
|
||||||
|
@ -194,3 +196,9 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
|
||||||
更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。
|
更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。
|
||||||
|
|
||||||
|
|
||||||
|
### selfUpdate
|
||||||
|
|
||||||
|
设置 `selfUpdate` 为 `true` 后,`Form` 通过增量方式更新,只更新被修改的字段。大部分场景下,你只需要编写代码即可。而在某些特定场景,例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都需要进行渲染。你可以通过修改 Form.Item 取消 selfUpdate,或者在 `change` / `onValuesChange` 回调中手动调用 `this.$forceUpdate()` 更新组件。[示例]()
|
||||||
|
|
||||||
|
如果你并不精通 Vue,并不建议使用 selfUpdate,如果出现性能问题,可以尝试这把 Form 相关的业务独立到一个单独的组件中,减少组件渲染的消耗。
|
||||||
|
|
||||||
|
|
|
@ -60,7 +60,7 @@ function createBaseForm(option = {}, mixins = []) {
|
||||||
this.instances = {};
|
this.instances = {};
|
||||||
this.cachedBind = {};
|
this.cachedBind = {};
|
||||||
this.clearedFieldMetaCache = {};
|
this.clearedFieldMetaCache = {};
|
||||||
|
this.formItems = {};
|
||||||
this.renderFields = {};
|
this.renderFields = {};
|
||||||
this.domFields = {};
|
this.domFields = {};
|
||||||
|
|
||||||
|
@ -172,8 +172,9 @@ function createBaseForm(option = {}, mixins = []) {
|
||||||
return cache[action].fn;
|
return cache[action].fn;
|
||||||
},
|
},
|
||||||
|
|
||||||
getFieldDecorator(name, fieldOption) {
|
getFieldDecorator(name, fieldOption, formItem) {
|
||||||
const { props, ...restProps } = this.getFieldProps(name, fieldOption);
|
const { props, ...restProps } = this.getFieldProps(name, fieldOption);
|
||||||
|
this.formItems[name] = formItem;
|
||||||
return fieldElem => {
|
return fieldElem => {
|
||||||
// We should put field in record if it is rendered
|
// We should put field in record if it is rendered
|
||||||
this.renderFields[name] = true;
|
this.renderFields[name] = true;
|
||||||
|
@ -341,17 +342,26 @@ function createBaseForm(option = {}, mixins = []) {
|
||||||
setFields(maybeNestedFields, callback) {
|
setFields(maybeNestedFields, callback) {
|
||||||
const fields = this.fieldsStore.flattenRegisteredFields(maybeNestedFields);
|
const fields = this.fieldsStore.flattenRegisteredFields(maybeNestedFields);
|
||||||
this.fieldsStore.setFields(fields);
|
this.fieldsStore.setFields(fields);
|
||||||
|
const changedFields = Object.keys(fields).reduce(
|
||||||
|
(acc, name) => set(acc, name, this.fieldsStore.getField(name)),
|
||||||
|
{},
|
||||||
|
);
|
||||||
if (onFieldsChange) {
|
if (onFieldsChange) {
|
||||||
const changedFields = Object.keys(fields).reduce(
|
|
||||||
(acc, name) => set(acc, name, this.fieldsStore.getField(name)),
|
|
||||||
{},
|
|
||||||
);
|
|
||||||
onFieldsChange(this, changedFields, this.fieldsStore.getNestedAllFields());
|
onFieldsChange(this, changedFields, this.fieldsStore.getNestedAllFields());
|
||||||
}
|
}
|
||||||
if (templateContext) {
|
const formContext = templateContext || this;
|
||||||
templateContext.$forceUpdate();
|
let allUpdate = false;
|
||||||
} else {
|
Object.keys(changedFields).forEach(key => {
|
||||||
this.$forceUpdate();
|
let formItem = this.formItems[key];
|
||||||
|
formItem = typeof formItem === 'function' ? formItem() : formItem;
|
||||||
|
if (formItem && formItem.itemSelfUpdate) {
|
||||||
|
formItem.$forceUpdate();
|
||||||
|
} else {
|
||||||
|
allUpdate = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (allUpdate) {
|
||||||
|
formContext.$forceUpdate();
|
||||||
}
|
}
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
callback && callback();
|
callback && callback();
|
||||||
|
|
Loading…
Reference in New Issue