vxe-table 4.2.4-beta.2 → 4.2.4

package/packages/form/src/form.ts

@@ -6,8 +6,8 @@ import { getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils'
 import { errLog } from '../../tools/log'
 import { scrollToView } from '../../tools/dom'
 import { createItem, handleFieldOrItem } from './util'
-import { renderTitle } from './render'
 import { useSize } from '../../hooks/size'
+import VxeFormConfigItem from './form-config-item'
 
 import { VxeFormConstructor, VxeFormPropTypes, VxeFormEmits, FormReactData, FormMethods, FormPrivateRef, VxeFormPrivateMethods, VxeFormDefines, VxeFormItemPropTypes, VxeTooltipInstance, FormInternalData, VxeFormPrivateComputed } from '../../../types/all'
 
@@ -331,7 +331,7 @@ export default defineComponent({
                 }
               } else {
                 const isArrType = type === 'array'
-                const hasEmpty = isArrType ? (!XEUtils.isArray(itemValue) || !itemValue.length) : eqEmptyValue(itemValue)
+                const hasEmpty = isArrType || XEUtils.isArray(itemValue) ? (!XEUtils.isArray(itemValue) || !itemValue.length) : eqEmptyValue(itemValue)
                 if (required ? (hasEmpty || validErrorRuleValue(rule, itemValue)) : (!hasEmpty && validErrorRuleValue(rule, itemValue))) {
                   errorRules.push(new Rule(rule))
                 }
@@ -491,137 +491,31 @@ export default defineComponent({
       }
     }
 
-    /**
-     * 更新项状态
-     * 如果组件值 v-model 发生 change 时，调用改函数用于更新某一项编辑状态
-     * 如果单元格配置了校验规则，则会进行校验
-     */
-    const updateStatus = (scope: any, itemValue?: any) => {
-      const { property } = scope
-      if (property) {
-        validItemRules('change', property, itemValue)
+    const triggerItemEvent = (evnt: Event, field: string, itemValue?: any) => {
+      if (field) {
+        return validItemRules(evnt ? evnt.type : 'all', field, itemValue)
           .then(() => {
-            clearValidate(property)
+            clearValidate(field)
           })
           .catch(({ rule }) => {
-            const item = getItemByField(property)
+            const item = getItemByField(field)
             if (item) {
               item.showError = true
               item.errRule = rule
             }
           })
       }
+      return nextTick()
     }
 
-    const renderItems = (itemList: VxeFormDefines.ItemInfo[]): VNode[] => {
-      const { data, rules, titleOverflow: allTitleOverflow } = props
-      const { collapseAll } = reactData
-      const validOpts = computeValidOpts.value
-      return itemList.map((item) => {
-        const { slots, title, visible, folding, visibleMethod, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, children } = item
-        const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
-        const defaultSlot = slots ? slots.default : null
-        const titleSlot = slots ? slots.title : null
-        const span = item.span || props.span
-        const align = item.align || props.align
-        const titleAlign = item.titleAlign || props.titleAlign
-        const titleWidth = item.titleWidth || props.titleWidth
-        const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
-        const showEllipsis = itemOverflow === 'ellipsis'
-        const showTitle = itemOverflow === 'title'
-        const showTooltip = itemOverflow === true || itemOverflow === 'tooltip'
-        const hasEllipsis = showTitle || showTooltip || showEllipsis
-        let itemVisibleMethod = visibleMethod
-        const params = { data, field, property: field, item, $form: $xeform }
-        if (visible === false) {
-          return createCommentVNode()
-        }
-        let isRequired = false
-        if (rules) {
-          const itemRules = rules[field]
-          if (itemRules) {
-            isRequired = itemRules.some((rule) => rule.required)
-          }
-        }
-        // 如果为项集合
-        const isGather = children && children.length > 0
-        if (isGather) {
-          const childVNs = renderItems(item.children)
-          return childVNs.length ? h('div', {
-            class: ['vxe-form--gather vxe-row', item.id, span ? `vxe-col--${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '']
-          }, childVNs) : createCommentVNode()
-        }
-        if (!itemVisibleMethod && compConf && compConf.itemVisibleMethod) {
-          itemVisibleMethod = compConf.itemVisibleMethod
-        }
-        let contentVNs: any[] = []
-        if (defaultSlot) {
-          contentVNs = callSlot(defaultSlot, params)
-        } else if (compConf && compConf.renderItemContent) {
-          contentVNs = compConf.renderItemContent(itemRender, params)
-        } else if (field) {
-          contentVNs = [`${XEUtils.get(data, field)}`]
-        }
-        if (collapseNode) {
-          contentVNs.push(
-            h('div', {
-              class: 'vxe-form--item-trigger-node',
-              onClick: toggleCollapseEvent
-            }, [
-              h('span', {
-                class: 'vxe-form--item-trigger-text'
-              }, collapseAll ? GlobalConfig.i18n('vxe.form.unfolding') : GlobalConfig.i18n('vxe.form.folding')),
-              h('i', {
-                class: ['vxe-form--item-trigger-icon', collapseAll ? GlobalConfig.icon.FORM_FOLDING : GlobalConfig.icon.FORM_UNFOLDING]
-              })
-            ])
-          )
-        }
-        if (errRule && validOpts.showMessage) {
-          contentVNs.push(
-            h('div', {
-              class: 'vxe-form--item-valid',
-              style: errRule.maxWidth ? {
-                width: `${errRule.maxWidth}px`
-              } : null
-            }, errRule.content)
-          )
-        }
-        const ons = showTooltip ? {
-          onMouseenter (evnt: MouseEvent) {
-            triggerTitleTipEvent(evnt, params)
-          },
-          onMouseleave: handleTitleTipLeaveEvent
-        } : {}
-        return h('div', {
-          class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '', {
-            'is--title': title,
-            'is--required': isRequired,
-            'is--hidden': folding && collapseAll,
-            'is--active': !itemVisibleMethod || itemVisibleMethod(params),
-            'is--error': showError
-          }],
-          key: item.id
-        }, [
-          h('div', {
-            class: 'vxe-form--item-inner'
-          }, [
-            title || titleSlot ? h('div', {
-              class: ['vxe-form--item-title', titleAlign ? `align--${titleAlign}` : null, {
-                'is--ellipsis': hasEllipsis
-              }],
-              style: titleWidth ? {
-                width: isNaN(titleWidth as number) ? titleWidth : `${titleWidth}px`
-              } : null,
-              title: showTitle ? getFuncText(title) : null,
-              ...ons
-            }, renderTitle($xeform, item)) : null,
-            h('div', {
-              class: ['vxe-form--item-content', align ? `align--${align}` : null]
-            }, contentVNs)
-          ])
-        ])
-      })
+    /**
+     * 更新项状态
+     * 如果组件值 v-model 发生 change 时，调用改函数用于更新某一项编辑状态
+     * 如果单元格配置了校验规则，则会进行校验
+     */
+    const updateStatus = (scope: any, itemValue?: any) => {
+      const { field } = scope
+      return triggerItemEvent(new Event('change'), field, itemValue)
     }
 
     formMethods = {
@@ -641,6 +535,7 @@ export default defineComponent({
 
     const formPrivateMethods: VxeFormPrivateMethods = {
       callSlot,
+      triggerItemEvent,
       toggleCollapseEvent,
       triggerTitleTipEvent,
       handleTitleTipLeaveEvent
@@ -672,7 +567,7 @@ export default defineComponent({
     })
 
     const renderVN = () => {
-      const { loading, className, data, titleColon, titleAsterisk, customLayout } = props
+      const { loading, className, data, customLayout } = props
       const { formItems } = reactData
       // const formItems: any[] = []
       const vSize = computeSize.value
@@ -682,8 +577,6 @@ export default defineComponent({
         ref: refElem,
         class: ['vxe-form', className ? (XEUtils.isFunction(className) ? className({ items: formItems, data, $form: $xeform }) : className) : '', {
           [`size--${vSize}`]: vSize,
-          'is--colon': titleColon,
-          'is--asterisk': titleAsterisk,
           'is--loading': loading
         }],
         onSubmit: submitEvent,
@@ -691,7 +584,13 @@ export default defineComponent({
       }, [
         h('div', {
           class: 'vxe-form--wrapper vxe-row'
-        }, customLayout ? (defaultSlot ? defaultSlot({}) : []) : renderItems(formItems)),
+        }, customLayout ? (defaultSlot ? defaultSlot({}) : []) : formItems.map((item, index) => {
+          return h(VxeFormConfigItem, {
+            key: index,
+            itemConfig2: item,
+            itemConfig: item
+          })
+        })),
         h('div', {
           class: 'vxe-form-slots',
           ref: 'hideItem'
@@ -718,6 +617,9 @@ export default defineComponent({
     $xeform.renderVN = renderVN
 
     provide('$xeform', $xeform)
+    provide('$xeformgather', null)
+    provide('$xeformitem', null)
+    provide('$xeformiteminfo', null)
 
     return $xeform
   },

package/packages/form/src/itemInfo.ts

@@ -10,6 +10,8 @@ export class ItemInfo {
       align: item.align,
       titleAlign: item.titleAlign,
       titleWidth: item.titleWidth,
+      titleColon: item.titleColon,
+      titleAsterisk: item.titleAsterisk,
       titlePrefix: item.titlePrefix,
       titleSuffix: item.titleSuffix,
       titleOverflow: item.titleOverflow,

package/packages/input/src/input.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, Teleport, ref, Ref, computed, reactive, nextTick, watch, onUnmounted, PropType } from 'vue'
+import { defineComponent, h, Teleport, ref, Ref, computed, reactive, inject, nextTick, watch, onUnmounted, PropType } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
@@ -8,7 +8,7 @@ import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 import { toStringTimeDate, getDateQuarter } from './date'
 import { handleNumber, toFloatValueFixed } from './number'
 
-import { VNodeStyle, VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, VxeInputPropTypes, InputPrivateRef } from '../../../types/all'
+import { VNodeStyle, VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types/all'
 
 interface DateYearItem {
   date: Date;
@@ -130,6 +130,8 @@ export default defineComponent({
   ] as VxeInputEmits,
   setup (props, context) {
     const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeform', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeformiteminfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -610,6 +612,40 @@ export default defineComponent({
       return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float')
     })
 
+    const computeNumValue = computed(() => {
+      const { type } = props
+      const { inputValue } = reactData
+      const isNumType = computeIsNumType.value
+      if (isNumType) {
+        return type === 'integer' ? XEUtils.toInteger(handleNumber(inputValue)) : XEUtils.toNumber(handleNumber(inputValue))
+      }
+      return 0
+    })
+
+    const computeIsDisabledSubtractNumber = computed(() => {
+      const { min } = props
+      const { inputValue } = reactData
+      const isNumType = computeIsNumType.value
+      const numValue = computeNumValue.value
+      // 当有值时再进行判断
+      if ((inputValue || inputValue === 0) && isNumType && min !== null) {
+        return numValue <= XEUtils.toNumber(min)
+      }
+      return false
+    })
+
+    const computeIsDisabledAddNumber = computed(() => {
+      const { max } = props
+      const { inputValue } = reactData
+      const isNumType = computeIsNumType.value
+      const numValue = computeNumValue.value
+      // 当有值时再进行判断
+      if ((inputValue || inputValue === 0) && isNumType && max !== null) {
+        return numValue >= XEUtils.toNumber(max)
+      }
+      return false
+    })
+
     const getNumberValue = (val: any) => {
       const { type, exponential } = props
       const inpMaxlength = computeInpMaxlength.value
@@ -632,6 +668,10 @@ export default defineComponent({
       inputMethods.dispatchEvent('input', { value }, evnt)
       if (XEUtils.toValueString(props.modelValue) !== value) {
         inputMethods.dispatchEvent('change', { value }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+        }
       }
     }
 
@@ -959,8 +999,9 @@ export default defineComponent({
 
     const numberNextEvent = (evnt: Event) => {
       const { readonly, disabled } = props
+      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value
       clearTimeout(downbumTimeout)
-      if (!disabled && !readonly) {
+      if (!disabled && !readonly && !isDisabledSubtractNumber) {
         numberChange(false, evnt)
       }
       inputMethods.dispatchEvent('next-number', {}, evnt)
@@ -975,8 +1016,9 @@ export default defineComponent({
 
     const numberPrevEvent = (evnt: Event) => {
       const { readonly, disabled } = props
+      const isDisabledAddNumber = computeIsDisabledAddNumber.value
       clearTimeout(downbumTimeout)
-      if (!disabled && !readonly) {
+      if (!disabled && !readonly && !isDisabledAddNumber) {
         numberChange(true, evnt)
       }
       inputMethods.dispatchEvent('prev-number', {}, evnt)
@@ -2059,11 +2101,15 @@ export default defineComponent({
     }
 
     const renderNumberIcon = () => {
+      const isDisabledAddNumber = computeIsDisabledAddNumber.value
+      const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value
       return h('span', {
         class: 'vxe-input--number-suffix'
       }, [
         h('span', {
-          class: 'vxe-input--number-prev is--prev',
+          class: ['vxe-input--number-prev is--prev', {
+            'is--disabled': isDisabledAddNumber
+          }],
           onMousedown: numberMousedownEvent,
           onMouseup: numberStopDown,
           onMouseleave: numberStopDown
@@ -2073,7 +2119,9 @@ export default defineComponent({
           })
         ]),
         h('span', {
-          class: 'vxe-input--number-next is--next',
+          class: ['vxe-input--number-next is--next', {
+            'is--disabled': isDisabledSubtractNumber
+          }],
           onMousedown: numberMousedownEvent,
           onMouseup: numberStopDown,
           onMouseleave: numberStopDown

package/packages/radio/src/button.ts

@@ -4,7 +4,7 @@ import { getFuncText } from '../../tools/utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
 
-import { VxeRadioButtonPropTypes, VxeRadioGroupConstructor, VxeRadioButtonConstructor, VxeRadioButtonEmits, VxeRadioGroupPrivateMethods, RadioButtonMethods } from '../../../types/all'
+import { VxeRadioButtonPropTypes, VxeRadioGroupConstructor, VxeRadioButtonConstructor, VxeRadioButtonEmits, VxeRadioGroupPrivateMethods, RadioButtonMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types/all'
 
 export default defineComponent({
   name: 'VxeRadioButton',
@@ -23,6 +23,8 @@ export default defineComponent({
   ] as VxeRadioButtonEmits,
   setup (props, context) {
     const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeform', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeformiteminfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -69,6 +71,10 @@ export default defineComponent({
       } else {
         emit('update:modelValue', label)
         radioButtonMethods.dispatchEvent('change', { label }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, label)
+        }
       }
     }
 

package/packages/radio/src/group.ts

@@ -1,9 +1,9 @@
-import { defineComponent, h, provide, PropType } from 'vue'
+import { defineComponent, h, provide, PropType, inject } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
 
-import { VxeRadioGroupPropTypes, VxeRadioGroupConstructor, VxeRadioGroupEmits, VxeRadioGroupPrivateMethods, RadioGroupPrivateMethods, RadioGroupMethods } from '../../../types/all'
+import { VxeRadioGroupPropTypes, VxeRadioGroupConstructor, VxeRadioGroupEmits, VxeRadioGroupPrivateMethods, RadioGroupPrivateMethods, RadioGroupMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types/all'
 
 export default defineComponent({
   name: 'VxeRadioGroup',
@@ -19,6 +19,8 @@ export default defineComponent({
   ] as VxeRadioGroupEmits,
   setup (props, context) {
     const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeform', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeformiteminfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -34,9 +36,13 @@ export default defineComponent({
     useSize(props)
 
     const radioGroupPrivateMethods: RadioGroupPrivateMethods = {
-      handleChecked (params) {
+      handleChecked (params, evnt) {
         emit('update:modelValue', params.label)
         radioGroupMethods.dispatchEvent('change', params)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, params.label)
+        }
       }
     }
 

package/packages/radio/src/radio.ts

@@ -4,7 +4,7 @@ import { getFuncText } from '../../tools/utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
 
-import { VxeRadioPropTypes, VxeRadioConstructor, VxeRadioEmits, VxeRadioGroupConstructor, VxeRadioGroupPrivateMethods, RadioMethods } from '../../../types/all'
+import { VxeRadioPropTypes, VxeRadioConstructor, VxeRadioEmits, VxeRadioGroupConstructor, VxeRadioGroupPrivateMethods, RadioMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types/all'
 
 export default defineComponent({
   name: 'VxeRadio',
@@ -24,6 +24,8 @@ export default defineComponent({
   ] as VxeRadioEmits,
   setup (props, context) {
     const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeform', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeformiteminfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -62,6 +64,10 @@ export default defineComponent({
       } else {
         emit('update:modelValue', label)
         radioMethods.dispatchEvent('change', { label }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, label)
+        }
       }
     }
 

package/packages/select/src/select.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, Teleport, PropType, ref, Ref, VNode, resolveComponent, ComponentOptions, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted } from 'vue'
+import { defineComponent, h, Teleport, PropType, ref, Ref, inject, VNode, resolveComponent, ComponentOptions, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
@@ -6,7 +6,7 @@ import { getEventTargetNode, getAbsolutePos } from '../../tools/dom'
 import { getLastZIndex, nextZIndex, getFuncText, formatText } from '../../tools/utils'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 
-import { VxeSelectPropTypes, VxeSelectConstructor, SelectReactData, VxeSelectEmits, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeInputConstructor, VxeOptgroupProps, VxeOptionProps } from '../../../types/all'
+import { VxeSelectPropTypes, VxeSelectConstructor, SelectReactData, VxeSelectEmits, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeInputConstructor, VxeOptgroupProps, VxeOptionProps, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types/all'
 
 function isOptionVisible (option: any) {
   return option.visible !== false
@@ -49,6 +49,8 @@ export default defineComponent({
   ] as VxeSelectEmits,
   setup (props, context) {
     const { slots, emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeform', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeformiteminfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -370,6 +372,10 @@ export default defineComponent({
       if (selectValue !== props.modelValue) {
         emit('update:modelValue', selectValue)
         selectMethods.dispatchEvent('change', { value: selectValue }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, selectValue)
+        }
       }
     }
 

package/packages/switch/src/switch.ts

@@ -1,10 +1,10 @@
-import { defineComponent, h, ref, Ref, computed, reactive, nextTick, createCommentVNode, PropType } from 'vue'
+import { defineComponent, h, ref, Ref, computed, reactive, nextTick, createCommentVNode, PropType, inject } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
 import { getFuncText } from '../../tools/utils'
 
-import { VxeSwitchPropTypes, VxeSwitchConstructor, VxeSwitchEmits, SwitchReactData, SwitchMethods } from '../../../types/all'
+import { VxeSwitchPropTypes, VxeSwitchConstructor, VxeSwitchEmits, SwitchReactData, SwitchMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types/all'
 
 export default defineComponent({
   name: 'VxeSwitch',
@@ -27,6 +27,8 @@ export default defineComponent({
   ] as VxeSwitchEmits,
   setup (props, context) {
     const { emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeform', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeformiteminfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -70,6 +72,10 @@ export default defineComponent({
         reactData.hasAnimat = true
         emit('update:modelValue', value)
         switchMethods.dispatchEvent('change', { value }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+        }
         _atimeout = setTimeout(() => {
           reactData.hasAnimat = false
         }, 400)

package/packages/table/src/table.ts

@@ -10,6 +10,7 @@ import { VXETable } from '../../v-x-e-table'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import Cell from './cell'
 import TableBodyComponent from './body'
+import TableHeaderComponent from '../../header'
 import tableProps from './props'
 import tableEmits from './emits'
 import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement } from './util'
@@ -5569,7 +5570,7 @@ export default defineComponent({
         ref: isFixedLeft ? refLeftContainer : refRightContainer,
         class: `vxe-table--fixed-${fixedType}-wrapper`
       }, [
-        showHeader ? h(resolveComponent('vxe-table-header') as ComponentOptions, {
+        showHeader ? h(TableHeaderComponent, {
           ref: isFixedLeft ? refTableLeftHeader : refTableRightHeader,
           fixedType,
           tableData,
@@ -5963,7 +5964,7 @@ export default defineComponent({
             /**
              * 表头
              */
-            showHeader ? h(resolveComponent('vxe-table-header') as ComponentOptions, {
+            showHeader ? h(TableHeaderComponent, {
               ref: refTableHeader,
               tableData,
               tableColumn,

package/packages/textarea/src/textarea.ts

@@ -1,10 +1,10 @@
-import { defineComponent, h, ref, Ref, computed, nextTick, watch, PropType, reactive } from 'vue'
+import { defineComponent, h, ref, Ref, computed, nextTick, watch, PropType, reactive, inject } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { getFuncText } from '../../tools/utils'
 import { useSize } from '../../hooks/size'
 
-import { VxeTextareaPropTypes, TextareaReactData, TextareaMethods, VxeTextareaConstructor, VxeTextareaEmits, TextareaPrivateRef } from '../../../types/all'
+import { VxeTextareaPropTypes, TextareaReactData, TextareaMethods, VxeTextareaConstructor, VxeTextareaEmits, TextareaPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types/all'
 
 let autoTxtElem: HTMLDivElement
 
@@ -40,6 +40,8 @@ export default defineComponent({
   ] as VxeTextareaEmits,
   setup (props, context) {
     const { emit } = context
+    const $xeform = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeform', null)
+    const $xeformiteminfo = inject<VxeFormDefines.ProvideItemInfo | null>('$xeformiteminfo', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -136,6 +138,10 @@ export default defineComponent({
       emit('update:modelValue', value)
       if (XEUtils.toValueString(props.modelValue) !== value) {
         textareaMethods.dispatchEvent('change', { value }, evnt)
+        // 自动更新校验状态
+        if ($xeform && $xeformiteminfo) {
+          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value)
+        }
       }
     }
 

package/packages/validator/src/hook.ts

@@ -314,7 +314,7 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
                   }
                 } else {
                   const isArrType = type === 'array'
-                  const hasEmpty = isArrType ? (!XEUtils.isArray(cellValue) || !cellValue.length) : eqEmptyValue(cellValue)
+                  const hasEmpty = isArrType || XEUtils.isArray(cellValue) ? (!XEUtils.isArray(cellValue) || !cellValue.length) : eqEmptyValue(cellValue)
                   if (required ? (hasEmpty || validErrorRuleValue(rule, cellValue)) : (!hasEmpty && validErrorRuleValue(rule, cellValue))) {
                     validRuleErr = true
                     errorRules.push(new Rule(rule))

package/styles/button.scss

@@ -272,11 +272,6 @@ $btnThemeList: (
   }
 }
 .vxe-button--loading-icon,
-.vxe-button--icon,
-.vxe-button--content {
-  vertical-align: middle;
-}
-.vxe-button--loading-icon,
 .vxe-button--icon {
   min-width: $vxe-font-size;
   &+.vxe-button--content {

package/styles/form.scss

@@ -106,22 +106,9 @@
       }
     }
   }
-  &.is--asterisk {
-    .vxe-form--item {
-      &.is--required {
-        .vxe-form--item-title-content {
-          &:before {
-            content: "*";
-            color: $vxe-form-validate-error-color;
-            font-family: Verdana,Arial,Tahoma;
-            margin-right: 0.2em;
-            font-weight: normal;
-            vertical-align: middle;
-          }
-        }
-      }
-    }
-  }
+}
+
+.vxe-form--item {
   &.is--colon {
     .vxe-form--item-title-postfix {
       &:after {
@@ -131,9 +118,20 @@
       }
     }
   }
-}
-
-.vxe-form--item {
+  &.is--asterisk {
+    &.is--required {
+      .vxe-form--item-title-content {
+        &:before {
+          content: "*";
+          color: $vxe-form-validate-error-color;
+          font-family: Verdana,Arial,Tahoma;
+          margin-right: 0.2em;
+          font-weight: normal;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
   &.is--span {
     .vxe-default-input:not([type="submit"]):not([type="reset"]),
     .vxe-default-textarea,