vxe-pc-ui 3.0.16 → 3.1.0

package/README.md

@@ -46,7 +46,7 @@
 * [ ] flow-view 流程设计器-视图渲染
 * [x] form 表单
 * [x] form-design 表单设计器
-* [x] form-gather 表单-容器
+* [x] form-group 表单-分组
 * [x] form-item 表单-项
 * [x] form-view 表单设计器-视图渲染
 * [x] icon 图标

package/es/components.js

@@ -22,6 +22,7 @@ import VxeDrawer, { DrawerController } from './drawer';
 import VxeForm from './form';
 // import VxeFormDesign from './form-design'
 import VxeFormGather from './form-gather';
+import VxeFormGroup from './form-group';
 import VxeFormItem from './form-item';
 // import VxeFormView from './form-view'
 import VxeIcon from './icon';
@@ -91,6 +92,7 @@ const components = [
     VxeForm,
     // VxeFormDesign,
     VxeFormGather,
+    VxeFormGroup,
     VxeFormItem,
     // VxeFormView,
     VxeIcon,
@@ -176,6 +178,7 @@ export * from './drawer';
 export * from './form';
 // export * from './form-design'
 export * from './form-gather';
+export * from './form-group';
 export * from './form-item';
 // export * from './form-view'
 export * from './icon';

package/es/date-picker/src/date-picker.js

@@ -666,6 +666,20 @@ export default defineVxeComponent({
             reactData.isActivated = false;
             return $xeDatePicker.$nextTick();
         },
+        updateModelValue(modelValue) {
+            const $xeDatePicker = this;
+            const reactData = $xeDatePicker.reactData;
+            let val = '';
+            if (modelValue) {
+                if (XEUtils.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
+                    val = new Date(modelValue);
+                }
+                else {
+                    val = modelValue;
+                }
+            }
+            reactData.inputValue = val;
+        },
         parseDate(value, format) {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
@@ -824,7 +838,9 @@ export default defineVxeComponent({
          */
         initValue() {
             const $xeDatePicker = this;
+            const props = $xeDatePicker;
             const isDatePickerType = $xeDatePicker.computeIsDatePickerType;
+            $xeDatePicker.updateModelValue(props.value);
             if (isDatePickerType) {
                 $xeDatePicker.changeValue();
             }
@@ -2361,17 +2377,15 @@ export default defineVxeComponent({
     watch: {
         value(val) {
             const $xeDatePicker = this;
-            const reactData = $xeDatePicker.reactData;
-            reactData.inputValue = val;
+            $xeDatePicker.updateModelValue(val);
             $xeDatePicker.changeValue();
         },
         type() {
             const $xeDatePicker = this;
-            const props = $xeDatePicker;
             const reactData = $xeDatePicker.reactData;
             // 切换类型是重置内置变量
             Object.assign(reactData, {
-                inputValue: props.value,
+                inputValue: '',
                 datetimePanelValue: null,
                 datePanelValue: null,
                 datePanelLabel: '',

package/es/form/src/form-config-item.js

@@ -1,10 +1,8 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getIcon, getI18n, renderer, renderEmptyElement, globalMixins } from '../../ui';
-import { getFuncText, isEnableConf } from '../../ui/src/utils';
-import { getSlotVNs } from '../../ui/src/vn';
-import { renderTitle } from './render';
-import { isActiveItem } from './util';
+import { renderer, globalMixins, renderEmptyElement } from '../../ui';
+import { isEnableConf } from '../../ui/src/utils';
+import { renderTitle, getItemClass, getItemContentClass, renderItemContent } from './render';
 const VxeFormConfigItem = defineVxeComponent({
     name: 'VxeFormConfigItem',
     mixins: [
@@ -22,176 +20,47 @@ const VxeFormConfigItem = defineVxeComponent({
         const xeFormItemInfo = this;
         return {
             xeFormItemInfo,
-            $xeFormGather: null
+            $xeFormGroup: null
         };
     },
     computed: Object.assign({}, {}),
     methods: {
-        renderVN(h) {
+        renderItem(h, $xeForm, item) {
             const $xeFormConfigItem = this;
-            const props = $xeFormConfigItem;
-            const $xeForm = $xeFormConfigItem.$xeForm;
             const formProps = $xeForm;
-            const formReactData = $xeForm.reactData;
-            const { data, rules, readonly, disabled, span: allSpan, align: allAlign, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps;
-            const item = props.itemConfig;
-            const { collapseAll } = formReactData;
-            const validOpts = $xeForm.computeValidOpts;
-            const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, children, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item;
+            const { data, readonly, disabled } = formProps;
+            const { visible, field, itemRender, contentStyle, children, showContent } = item;
             const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
-            const itemClassName = compConf ? (compConf.formItemClassName || compConf.itemClassName) : '';
             const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
-            const itemContentClassName = compConf ? (compConf.formItemContentClassName || compConf.itemContentClassName) : '';
             const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
-            const itemTitleClassName = compConf ? (compConf.formItemTitleClassName || compConf.itemTitleClassName) : '';
-            const itemTitleStyle = compConf ? (compConf.formItemTitleStyle || compConf.itemTitleStyle) : null;
-            const defaultSlot = slots ? slots.default : null;
-            const titleSlot = slots ? slots.title : null;
-            const span = item.span || allSpan;
-            const align = item.align || allAlign;
-            const itemPadding = XEUtils.eqNull(padding) ? allPadding : padding;
-            const itemVertical = XEUtils.eqNull(vertical) ? allVertical : vertical;
-            const titleBold = XEUtils.eqNull(item.titleBold) ? allTitleBold : item.titleBold;
-            const titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
-            const titleWidth = itemVertical ? null : (XEUtils.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth);
-            const titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
-            const titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
-            const itemOverflow = XEUtils.eqNull(titleOverflow) ? allTitleOverflow : titleOverflow;
-            const ovEllipsis = itemOverflow === 'ellipsis';
-            const ovTitle = itemOverflow === 'title';
-            const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip';
-            const hasEllipsis = ovTitle || ovTooltip || ovEllipsis;
             const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeForm.xegrid };
+            const hasGroup = children && children.length > 0;
             if (visible === false) {
                 return renderEmptyElement($xeFormConfigItem);
             }
-            let isRequired = false;
-            let isValid = false;
-            if (!readonly && rules) {
-                const itemRules = rules[field];
-                if (itemRules && itemRules.length) {
-                    isValid = true;
-                    isRequired = itemRules.some((rule) => rule.required);
-                }
-            }
-            // 如果为项集合
-            const isGather = children && children.length > 0;
-            if (isGather) {
-                const childVNs = children.map((childItem, index) => {
-                    return h(VxeFormConfigItem, {
-                        key: index,
-                        props: {
-                            itemConfig: childItem
-                        }
-                    });
-                });
-                return childVNs.length
-                    ? h('div', {
-                        class: ['vxe-form--gather vxe-form--item-row', item.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '']
-                    }, childVNs)
-                    : renderEmptyElement($xeFormConfigItem);
-            }
-            let contentVNs = [];
-            const rftContent = compConf ? (compConf.renderFormItemContent || compConf.renderItemContent) : null;
-            if (defaultSlot) {
-                contentVNs = $xeForm.callSlot(defaultSlot, params, h);
-            }
-            else if (rftContent) {
-                contentVNs = getSlotVNs(rftContent.call($xeForm, h, itemRender, params));
-            }
-            else if (field) {
-                contentVNs = [XEUtils.toValueString(XEUtils.get(data, field))];
-            }
-            if (collapseNode) {
-                contentVNs.push(h('div', {
-                    class: 'vxe-form--item-trigger-node',
-                    on: {
-                        click: $xeForm.toggleCollapseEvent
-                    }
-                }, [
-                    h('span', {
-                        class: 'vxe-form--item-trigger-text'
-                    }, collapseAll ? getI18n('vxe.form.unfolding') : getI18n('vxe.form.folding')),
-                    h('i', {
-                        class: ['vxe-form--item-trigger-icon', collapseAll ? getIcon().FORM_FOLDING : getIcon().FORM_UNFOLDING]
-                    })
-                ]));
-            }
-            if (errRule && validOpts.showMessage) {
-                contentVNs.push(h('div', {
-                    class: 'vxe-form--item-valid',
-                    style: errRule.maxWidth
-                        ? {
-                            width: `${errRule.maxWidth}px`
-                        }
-                        : {}
-                }, errRule.content));
-            }
-            const ons = ovTooltip
-                ? {
-                    mouseenter(evnt) {
-                        $xeForm.triggerTitleTipEvent(evnt, params);
-                    },
-                    mouseleave: $xeForm.handleTitleTipLeaveEvent
-                }
-                : {};
             return h('div', {
-                class: [
-                    'vxe-form--item',
-                    item.id,
-                    span ? `vxe-form--item-col_${span} is--span` : '',
-                    className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
-                    itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : itemClassName) : '',
-                    {
-                        'is--title': title,
-                        'is--colon': titleColon,
-                        'is--bold': titleBold,
-                        'is--padding': itemPadding,
-                        'is--vertical': itemVertical,
-                        'is--asterisk': titleAsterisk,
-                        'is--valid': isValid,
-                        'is--required': isRequired,
-                        'is--hidden': folding && collapseAll,
-                        'is--active': isActiveItem($xeForm, item),
-                        'is--error': showError
-                    }
-                ],
+                key: item.id,
+                class: getItemClass($xeForm, item),
                 style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : (itemStyle || {})
             }, [
-                h('div', {
-                    class: 'vxe-form--item-inner'
-                }, [
-                    (showTitle !== false) && (title || titleSlot)
-                        ? h('div', {
-                            class: [
-                                'vxe-form--item-title',
-                                titleAlign ? `align--${titleAlign}` : '',
-                                hasEllipsis ? 'is--ellipsis' : '',
-                                itemTitleClassName ? (XEUtils.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName) : '',
-                                titleClassName ? (XEUtils.isFunction(titleClassName) ? titleClassName(params) : titleClassName) : ''
-                            ],
-                            style: Object.assign({}, XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth
-                                ? {
-                                    width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
-                                }
-                                : null),
-                            attrs: {
-                                title: ovTitle ? getFuncText(title) : null
-                            },
-                            on: ons
-                        }, renderTitle(h, $xeFormConfigItem, $xeForm, item))
-                        : null,
-                    h('div', {
-                        class: [
-                            'vxe-form--item-content',
-                            align ? `align--${align}` : '',
-                            itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
-                            contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
-                        ],
+                renderTitle(h, $xeForm, item),
+                showContent === false
+                    ? renderEmptyElement($xeFormConfigItem)
+                    : h('div', {
+                        class: getItemContentClass($xeForm, item),
                         style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
-                    }, contentVNs)
-                ])
+                    }, hasGroup
+                        ? children.map((childItem) => $xeFormConfigItem.renderItem(h, $xeForm, childItem))
+                        : [
+                            renderItemContent(h, $xeForm, item)
+                        ])
             ]);
+        },
+        renderVN(h) {
+            const $xeFormConfigItem = this;
+            const props = $xeFormConfigItem;
+            const $xeForm = $xeFormConfigItem.$xeForm;
+            return $xeFormConfigItem.renderItem(h, $xeForm, props.itemConfig);
         }
     },
     render(h) {

package/es/form/src/form-group.js

@@ -0,0 +1,104 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { renderer, globalMixins, renderEmptyElement } from '../../ui';
+import { isEnableConf } from '../../ui/src/utils';
+import { createItem, watchItem, destroyItem, assembleItem } from './util';
+import { formItemProps } from './form-item';
+import { renderTitle, getItemClass, getItemContentClass } from './render';
+const formItemPropKeys = Object.keys(formItemProps);
+export default defineVxeComponent({
+    name: 'VxeFormGroup',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: formItemProps,
+    inject: {
+        $xeForm: {
+            default: null
+        },
+        $xeParentFormGroup: {
+            from: '$xeFormGroup',
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const formItem = {};
+        const reactData = {};
+        return {
+            xID,
+            formItem,
+            reactData
+        };
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        renderVN(h) {
+            const $xeFormGroup = this;
+            const slots = $xeFormGroup.$scopedSlots;
+            const formItem = $xeFormGroup.formItem;
+            const $xeForm = $xeFormGroup.$xeForm;
+            const formProps = $xeForm;
+            const item = formItem;
+            const { data, readonly, disabled } = formProps;
+            const { visible, field, itemRender, contentStyle } = item;
+            const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+            const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
+            const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
+            const defaultSlot = slots ? slots.default : null;
+            const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeForm.xegrid };
+            if (visible === false) {
+                return renderEmptyElement($xeFormGroup);
+            }
+            return h('div', {
+                ref: 'refElem',
+                key: item.id,
+                class: getItemClass($xeForm, item, true),
+                style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : (itemStyle || {})
+            }, [
+                renderTitle(h, $xeForm, item, true),
+                h('div', {
+                    class: getItemContentClass($xeForm, item, true),
+                    style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+                }, defaultSlot ? defaultSlot({}) : [])
+            ]);
+        }
+    },
+    provide() {
+        const $xeFormGroup = this;
+        const formItem = $xeFormGroup.formItem;
+        return {
+            $xeFormGroup,
+            $xeFormItem: null,
+            xeFormItemInfo: {
+                itemConfig: formItem
+            }
+        };
+    },
+    created() {
+        const $xeFormGroup = this;
+        const props = $xeFormGroup;
+        const $xeForm = $xeFormGroup.$xeForm;
+        const formItem = createItem($xeForm, props);
+        formItem.children = [];
+        $xeFormGroup.formItem = formItem;
+        watchItem($xeFormGroup, formItemPropKeys, formItem);
+    },
+    mounted() {
+        const $xeFormGroup = this;
+        const formItem = $xeFormGroup.formItem;
+        const $xeForm = $xeFormGroup.$xeForm;
+        const $xeParentFormGroup = $xeFormGroup.$xeParentFormGroup;
+        const elem = $xeFormGroup.$refs.refElem;
+        assembleItem($xeForm, elem, formItem, $xeParentFormGroup);
+    },
+    beforeDestroy() {
+        const $xeFormGroup = this;
+        const formItem = $xeFormGroup.formItem;
+        const $xeForm = $xeFormGroup.$xeForm;
+        destroyItem($xeForm, formItem);
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

package/es/form/src/form-item.js

@@ -1,15 +1,28 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getIcon, getI18n, renderer, renderEmptyElement, globalMixins } from '../../ui';
-import { getFuncText, isEnableConf } from '../../ui/src/utils';
-import { getSlotVNs } from '../../ui/src/vn';
-import { createItem, watchItem, destroyItem, assembleItem, isActiveItem } from './util';
-import { renderTitle } from './render';
+import { renderer, renderEmptyElement, globalMixins } from '../../ui';
+import { isEnableConf } from '../../ui/src/utils';
+import { createItem, watchItem, destroyItem, assembleItem } from './util';
+import { renderTitle, renderItemContent, getItemClass, getItemContentClass } from './render';
 export const formItemProps = {
     title: String,
     field: String,
-    span: [String, Number],
-    align: String,
+    span: {
+        type: [String, Number],
+        default: null
+    },
+    align: {
+        type: String,
+        default: null
+    },
+    verticalAlign: {
+        type: String,
+        default: null
+    },
+    titleBackground: {
+        type: Boolean,
+        default: null
+    },
     titleBold: {
         type: Boolean,
         default: null
@@ -59,6 +72,10 @@ export const formItemProps = {
         type: Boolean,
         default: null
     },
+    showContent: {
+        type: Boolean,
+        default: null
+    },
     folding: Boolean,
     collapseNode: Boolean,
     itemRender: Object,
@@ -75,7 +92,7 @@ export default defineVxeComponent({
         $xeForm: {
             default: null
         },
-        $xeFormGather: {
+        $xeFormGroup: {
             default: null
         }
     },
@@ -94,157 +111,40 @@ export default defineVxeComponent({
         renderItem(h, $xeForm, item) {
             const $xeFormItem = this;
             const formProps = $xeForm;
-            const formReactData = $xeForm.reactData;
-            const { data, rules, readonly, disabled, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps;
-            const { collapseAll } = formReactData;
-            const validOpts = $xeForm.computeValidOpts;
-            const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item;
+            const { data, readonly, disabled } = formProps;
+            const { visible, field, itemRender, contentStyle, showContent } = item;
             const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
-            const itemClassName = compConf ? (compConf.formItemClassName || compConf.itemClassName) : '';
             const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
-            const itemContentClassName = compConf ? (compConf.formItemContentClassName || compConf.itemContentClassName) : '';
             const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
-            const itemTitleClassName = compConf ? (compConf.formItemTitleClassName || compConf.itemTitleClassName) : '';
-            const itemTitleStyle = compConf ? (compConf.formItemTitleStyle || compConf.itemTitleStyle) : null;
-            const defaultSlot = slots ? slots.default : null;
-            const titleSlot = slots ? slots.title : null;
-            const span = item.span || formProps.span;
-            const align = item.align || formProps.align;
-            const itemPadding = XEUtils.eqNull(padding) ? allPadding : padding;
-            const itemVertical = XEUtils.eqNull(vertical) ? allVertical : vertical;
-            const titleBold = XEUtils.eqNull(item.titleBold) ? allTitleBold : item.titleBold;
-            const titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
-            const titleWidth = itemVertical ? null : (XEUtils.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth);
-            const titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
-            const titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
-            const itemOverflow = XEUtils.eqNull(titleOverflow) ? allTitleOverflow : titleOverflow;
-            const ovEllipsis = itemOverflow === 'ellipsis';
-            const ovTitle = itemOverflow === 'title';
-            const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip';
-            const hasEllipsis = ovTitle || ovTooltip || ovEllipsis;
             const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeForm.xegrid };
-            let isRequired = false;
-            let isValid = false;
             if (visible === false) {
                 return renderEmptyElement($xeFormItem);
             }
-            if (!readonly && rules) {
-                const itemRules = rules[field];
-                if (itemRules && itemRules.length) {
-                    isValid = true;
-                    isRequired = itemRules.some((rule) => rule.required);
-                }
-            }
-            let contentVNs = [];
-            const rftContent = compConf ? (compConf.renderFormItemContent || compConf.renderItemContent) : null;
-            if (defaultSlot) {
-                contentVNs = $xeForm.callSlot(defaultSlot, params, h);
-            }
-            else if (rftContent) {
-                contentVNs = getSlotVNs(rftContent.call($xeForm, h, itemRender, params));
-            }
-            else if (field) {
-                contentVNs = [`${XEUtils.get(data, field)}`];
-            }
-            if (collapseNode) {
-                contentVNs.push(h('div', {
-                    class: 'vxe-form--item-trigger-node',
-                    on: {
-                        click: $xeForm.toggleCollapseEvent
-                    }
-                }, [
-                    h('span', {
-                        class: 'vxe-form--item-trigger-text'
-                    }, collapseAll ? getI18n('vxe.form.unfolding') : getI18n('vxe.form.folding')),
-                    h('i', {
-                        class: ['vxe-form--item-trigger-icon', collapseAll ? getIcon().FORM_FOLDING : getIcon().FORM_UNFOLDING]
-                    })
-                ]));
-            }
-            if (errRule && validOpts.showMessage) {
-                contentVNs.push(h('div', {
-                    class: 'vxe-form--item-valid',
-                    style: errRule.maxWidth
-                        ? {
-                            width: `${errRule.maxWidth}px`
-                        }
-                        : {}
-                }, errRule.message));
-            }
-            const ons = ovTooltip
-                ? {
-                    mouseenter(evnt) {
-                        $xeForm.triggerTitleTipEvent(evnt, params);
-                    },
-                    mouseleave: $xeForm.handleTitleTipLeaveEvent
-                }
-                : {};
             return h('div', {
                 ref: 'refElem',
-                class: [
-                    'vxe-form--item',
-                    item.id,
-                    span ? `vxe-form--item-col_${span} is--span` : '',
-                    className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
-                    itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : itemClassName) : '',
-                    {
-                        'is--title': title,
-                        'is--colon': titleColon,
-                        'is--bold': titleBold,
-                        'is--padding': itemPadding,
-                        'is--vertical': itemVertical,
-                        'is--asterisk': titleAsterisk,
-                        'is--valid': isValid,
-                        'is--required': isRequired,
-                        'is--hidden': folding && collapseAll,
-                        'is--active': isActiveItem($xeForm, item),
-                        'is--error': showError
-                    }
-                ],
+                key: item.id,
+                class: getItemClass($xeForm, item),
                 style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : (itemStyle || {})
             }, [
-                h('div', {
-                    class: 'vxe-form--item-inner'
-                }, [
-                    (showTitle !== false) && (title || titleSlot)
-                        ? h('div', {
-                            class: [
-                                'vxe-form--item-title',
-                                titleAlign ? `align--${titleAlign}` : '',
-                                hasEllipsis ? 'is--ellipsis' : '',
-                                itemTitleClassName ? (XEUtils.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName) : '',
-                                titleClassName ? (XEUtils.isFunction(titleClassName) ? titleClassName(params) : titleClassName) : ''
-                            ],
-                            style: Object.assign({}, XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth
-                                ? {
-                                    width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
-                                }
-                                : null),
-                            attrs: {
-                                title: ovTitle ? getFuncText(title) : null
-                            },
-                            on: ons
-                        }, renderTitle(h, $xeFormItem, $xeForm, item))
-                        : null,
-                    h('div', {
-                        class: [
-                            'vxe-form--item-content',
-                            align ? `align--${align}` : '',
-                            itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
-                            contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
-                        ],
+                renderTitle(h, $xeForm, item),
+                showContent === false
+                    ? renderEmptyElement($xeFormItem)
+                    : h('div', {
+                        class: getItemContentClass($xeForm, item),
                         style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
-                    }, contentVNs)
-                ])
+                    }, [
+                        renderItemContent(h, $xeForm, item)
+                    ])
             ]);
         },
         renderVN(h) {
             const $xeFormItem = this;
-            const formItem = $xeFormItem.formItem;
             const $xeForm = $xeFormItem.$xeForm;
+            const formItem = $xeFormItem.formItem;
             const customLayout = $xeForm ? $xeForm.customLayout : false;
+            const item = formItem;
             return customLayout
-                ? $xeFormItem.renderItem(h, $xeForm, formItem)
+                ? $xeFormItem.renderItem(h, $xeForm, item)
                 : h('div', {
                     ref: 'refElem'
                 });
@@ -254,7 +154,7 @@ export default defineVxeComponent({
         const $xeFormItem = this;
         const formItem = $xeFormItem.formItem;
         return {
-            $xeFormGather: null,
+            $xeFormGroup: null,
             $xeFormItem,
             xeFormItemInfo: {
                 itemConfig: formItem
@@ -274,10 +174,10 @@ export default defineVxeComponent({
         const slots = $xeFormItem.$scopedSlots;
         const formItem = $xeFormItem.formItem;
         const $xeForm = $xeFormItem.$xeForm;
-        const $xeFormGather = $xeFormItem.$xeFormGather;
+        const $xeFormGroup = $xeFormItem.$xeFormGroup;
         formItem.slots = slots;
         const elem = $xeFormItem.$refs.refElem;
-        assembleItem($xeForm, elem, formItem, $xeFormGather);
+        assembleItem($xeForm, elem, formItem, $xeFormGroup);
     },
     beforeDestroy() {
         const $xeFormItem = this;