vxe-table 4.2.2 → 4.2.3-beta.0

package/packages/input/src/input.ts

@@ -12,8 +12,10 @@ import { VNodeStyle, VxeInputConstructor, VxeInputEmits, InputReactData, InputMe
 
 interface DateYearItem {
   date: Date;
+  isPrev: boolean;
   isCurrent: boolean;
   isNow: boolean;
+  isNext: boolean;
   year: number;
 }
 
@@ -50,7 +52,7 @@ interface DateHourMinuteSecondItem {
   label: string;
 }
 
-const yearSize = 20
+const yearSize = 12
 const monthSize = 20
 const quarterSize = 8
 
@@ -71,6 +73,7 @@ export default defineComponent({
     form: String as PropType<VxeInputPropTypes.Form>,
     className: String as PropType<VxeInputPropTypes.ClassName>,
     size: { type: String as PropType<VxeInputPropTypes.Size>, default: () => GlobalConfig.input.size || GlobalConfig.size },
+    multiple: Boolean as PropType<VxeInputPropTypes.Multiple>,
 
     // number、integer、float
     min: { type: [String, Number] as PropType<VxeInputPropTypes.Min>, default: null },
@@ -232,6 +235,38 @@ export default defineComponent({
       return props.maxDate ? XEUtils.toStringDate(props.maxDate) : null
     })
 
+    const computeSupportMultiples = computed(() => {
+      return ['date', 'week', 'month', 'quarter', 'year'].includes(props.type)
+    })
+
+    const computeDateListValue = computed(() => {
+      const { modelValue, multiple } = props
+      const isDatePickerType = computeIsDatePickerType.value
+      const dateValueFormat = computeDateValueFormat.value
+      if (multiple && modelValue && isDatePickerType) {
+        return XEUtils.toValueString(modelValue).split(',').map(item => {
+          const date = parseDate(item, dateValueFormat)
+          if (XEUtils.isValidDate(date)) {
+            return date
+          }
+          return null
+        })
+      }
+      return []
+    })
+
+    const computeDateMultipleValue = computed(() => {
+      const dateListValue = computeDateListValue.value
+      const dateValueFormat = computeDateValueFormat.value
+      return dateListValue.map(date => XEUtils.toDateString(date, dateValueFormat))
+    })
+
+    const computeDateMultipleLabel = computed(() => {
+      const dateListValue = computeDateListValue.value
+      const dateLabelFormat = computeDateLabelFormat.value
+      return dateListValue.map(date => XEUtils.toDateString(date, dateLabelFormat)).join(', ')
+    })
+
     const computeDateValueFormat = computed(() => {
       const { type } = props
       return type === 'time' ? 'HH:mm:ss' : (props.valueFormat || (type === 'datetime' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'))
@@ -296,14 +331,17 @@ export default defineComponent({
       const years: DateYearItem[] = []
       if (selectMonth && currentDate) {
         const currFullYear = currentDate.getFullYear()
-        const startYear = new Date(XEUtils.toNumber(('' + selectMonth.getFullYear()).replace(/\d{1}$/, '0')), 0, 1)
-        for (let index = -10; index < yearSize - 10; index++) {
-          const date = XEUtils.getWhatYear(startYear, index, 'first')
+        const selectFullYear = selectMonth.getFullYear()
+        const startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1)
+        for (let index = -4; index < yearSize + 4; index++) {
+          const date = XEUtils.getWhatYear(startYearDate, index, 'first')
           const itemFullYear = date.getFullYear()
           years.push({
             date,
             isCurrent: true,
+            isPrev: index < 0,
             isNow: currFullYear === itemFullYear,
+            isNext: index >= yearSize,
             year: itemFullYear
           })
         }
@@ -536,8 +574,8 @@ export default defineComponent({
     })
 
     const computeInpReadonly = computed(() => {
-      const { type, readonly, editable } = props
-      return readonly || !editable || type === 'week' || type === 'quarter'
+      const { type, readonly, editable, multiple } = props
+      return readonly || multiple || !editable || type === 'week' || type === 'quarter'
     })
 
     const computeInputType = computed(() => {
@@ -711,7 +749,7 @@ export default defineComponent({
       const { inputValue } = reactData
       if (isDatePickerType) {
         dateParseValue(inputValue)
-        reactData.inputValue = reactData.datePanelLabel
+        reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel
       }
     }
 
@@ -744,7 +782,7 @@ export default defineComponent({
     }
 
     const dateRevert = () => {
-      reactData.inputValue = reactData.datePanelLabel
+      reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel
     }
 
     const dateCheckMonth = (date: Date) => {
@@ -755,7 +793,7 @@ export default defineComponent({
     }
 
     const dateChange = (date: Date) => {
-      const { modelValue } = props
+      const { modelValue, multiple } = props
       const { datetimePanelValue } = reactData
       const isDateTimeType = computeIsDateTimeType.value
       const dateValueFormat = computeDateValueFormat.value
@@ -770,8 +808,36 @@ export default defineComponent({
       }
       const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek })
       dateCheckMonth(date)
-      if (!XEUtils.isEqual(modelValue, inpVal)) {
-        emitModel(inpVal, { type: 'update' })
+      if (multiple) {
+        // 如果为多选
+        const dateMultipleValue = computeDateMultipleValue.value
+        if (isDateTimeType) {
+          // 如果是datetime特殊类型
+          const dateListValue = computeDateListValue.value
+          const datetimeRest = []
+          dateListValue.forEach(item => {
+            if (item && !XEUtils.isDateSame(date, item, 'yyyyMMdd')) {
+              item.setHours(datetimePanelValue.getHours())
+              item.setMinutes(datetimePanelValue.getMinutes())
+              item.setSeconds(datetimePanelValue.getSeconds())
+              datetimeRest.push(item)
+            }
+          })
+          datetimeRest.push(date)
+          emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
+        } else {
+          // 如果是日期类型
+          if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
+            emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
+          } else {
+            emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' })
+          }
+        }
+      } else {
+        // 如果为单选
+        if (!XEUtils.isEqual(modelValue, inpVal)) {
+          emitModel(inpVal, { type: 'update' })
+        }
       }
     }
 
@@ -1048,8 +1114,10 @@ export default defineComponent({
 
     const dateTodayMonthEvent = (evnt: Event) => {
       dateNowHandle()
-      dateChange(reactData.currentDate)
-      hidePanel()
+      if (!props.multiple) {
+        dateChange(reactData.currentDate)
+        hidePanel()
+      }
       inputMethods.dispatchEvent('date-today', { type: props.type }, evnt)
     }
 
@@ -1086,7 +1154,7 @@ export default defineComponent({
     }
 
     const dateSelectItem = (date: Date) => {
-      const { type } = props
+      const { type, multiple } = props
       const { datePanelType } = reactData
       if (type === 'month') {
         if (datePanelType === 'year') {
@@ -1094,18 +1162,24 @@ export default defineComponent({
           dateCheckMonth(date)
         } else {
           dateChange(date)
-          hidePanel()
+          if (!multiple) {
+            hidePanel()
+          }
         }
       } else if (type === 'year') {
         dateChange(date)
-        hidePanel()
+        if (!multiple) {
+          hidePanel()
+        }
       } else if (type === 'quarter') {
         if (datePanelType === 'year') {
           reactData.datePanelType = 'quarter'
           dateCheckMonth(date)
         } else {
           dateChange(date)
-          hidePanel()
+          if (!multiple) {
+            hidePanel()
+          }
         }
       } else {
         if (datePanelType === 'month') {
@@ -1116,7 +1190,9 @@ export default defineComponent({
           dateCheckMonth(date)
         } else {
           dateChange(date)
-          hidePanel()
+          if (!multiple) {
+            hidePanel()
+          }
         }
       }
     }
@@ -1201,8 +1277,11 @@ export default defineComponent({
     }
 
     const dateConfirmEvent = () => {
+      const { type } = props
       const dateValue = computeDateValue.value
-      dateChange(dateValue || reactData.currentDate)
+      if (type === 'datetime') {
+        dateChange(dateValue || reactData.currentDate)
+      }
       hidePanel()
     }
 
@@ -1590,10 +1669,12 @@ export default defineComponent({
     }
 
     const renderDateDayTable = () => {
+      const { multiple } = props
       const { datePanelType, datePanelValue } = reactData
       const dateValue = computeDateValue.value
       const dateHeaders = computeDateHeaders.value
       const dayDatas = computeDayDatas.value
+      const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyyMMdd'
       return [
         h('table', {
@@ -1616,7 +1697,7 @@ export default defineComponent({
                   'is--now': item.isNow,
                   'is--next': item.isNext,
                   'is--disabled': isDateDisabled(item),
-                  'is--selected': XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                  'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
                   'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                 },
                 onClick: () => dateSelectEvent(item),
@@ -1629,10 +1710,12 @@ export default defineComponent({
     }
 
     const renderDateWeekTable = () => {
+      const { multiple } = props
       const { datePanelType, datePanelValue } = reactData
       const dateValue = computeDateValue.value
       const weekHeaders = computeWeekHeaders.value
       const weekDates = computeWeekDates.value
+      const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyyMMdd'
       return [
         h('table', {
@@ -1647,7 +1730,7 @@ export default defineComponent({
             }))
           ]),
           h('tbody', weekDates.map((rows) => {
-            const isSelected = rows.some((item) => XEUtils.isDateSame(dateValue, item.date, matchFormat))
+            const isSelected = multiple ? rows.some((item) => dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat))) : rows.some((item) => XEUtils.isDateSame(dateValue, item.date, matchFormat))
             const isHover = rows.some((item) => XEUtils.isDateSame(datePanelValue, item.date, matchFormat))
             return h('tr', rows.map((item) => {
               return h('td', {
@@ -1671,9 +1754,11 @@ export default defineComponent({
     }
 
     const renderDateMonthTable = () => {
+      const { multiple } = props
       const { datePanelType, datePanelValue } = reactData
       const dateValue = computeDateValue.value
       const monthDatas = computeMonthDatas.value
+      const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyyMM'
       return [
         h('table', {
@@ -1691,7 +1776,7 @@ export default defineComponent({
                   'is--now': item.isNow,
                   'is--next': item.isNext,
                   'is--disabled': isDateDisabled(item),
-                  'is--selected': XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                  'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
                   'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                 },
                 onClick: () => dateSelectEvent(item),
@@ -1704,9 +1789,11 @@ export default defineComponent({
     }
 
     const renderDateQuarterTable = () => {
+      const { multiple } = props
       const { datePanelType, datePanelValue } = reactData
       const dateValue = computeDateValue.value
       const quarterDatas = computeQuarterDatas.value
+      const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyyq'
       return [
         h('table', {
@@ -1724,7 +1811,7 @@ export default defineComponent({
                   'is--now': item.isNow,
                   'is--next': item.isNext,
                   'is--disabled': isDateDisabled(item),
-                  'is--selected': XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                  'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
                   'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                 },
                 onClick: () => dateSelectEvent(item),
@@ -1737,9 +1824,11 @@ export default defineComponent({
     }
 
     const renderDateYearTable = () => {
+      const { multiple } = props
       const { datePanelType, datePanelValue } = reactData
       const dateValue = computeDateValue.value
       const yearDatas = computeYearDatas.value
+      const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyy'
       return [
         h('table', {
@@ -1752,10 +1841,12 @@ export default defineComponent({
             return h('tr', rows.map((item) => {
               return h('td', {
                 class: {
-                  'is--disabled': isDateDisabled(item),
+                  'is--prev': item.isPrev,
                   'is--current': item.isCurrent,
                   'is--now': item.isNow,
-                  'is--selected': XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                  'is--next': item.isNext,
+                  'is--disabled': isDateDisabled(item),
+                  'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
                   'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                 },
                 onClick: () => dateSelectEvent(item),
@@ -1783,6 +1874,7 @@ export default defineComponent({
     }
 
     const renderDatePanel = () => {
+      const { multiple } = props
       const { datePanelType } = reactData
       const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value
@@ -1831,7 +1923,16 @@ export default defineComponent({
               h('i', {
                 class: 'vxe-icon--caret-right'
               })
-            ])
+            ]),
+            multiple && computeSupportMultiples.value ? h('span', {
+              class: 'vxe-input--date-picker-btn vxe-input--date-picker-confirm-btn'
+            }, [
+              h('button', {
+                class: 'vxe-input--date-picker-confirm',
+                type: 'button',
+                onClick: dateConfirmEvent
+              }, GlobalConfig.i18n('vxe.button.confirm'))
+            ]) : null
           ])
         ]),
         h('div', {
@@ -2138,7 +2239,7 @@ export default defineComponent({
       const isDatePickerType = computeIsDatePickerType.value
       if (isDatePickerType) {
         dateParseValue(reactData.datePanelValue)
-        reactData.inputValue = reactData.datePanelLabel
+        reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel
       }
     })
 

package/packages/keyboard/src/hook.ts

@@ -66,8 +66,12 @@ const tableKeyboardHook: VxeGlobalHooksHandles.HookOptions = {
         const { elemStore } = internalData
         const disX = evnt.clientX
         const disY = evnt.clientY
-        const bodyWrapperElem = elemStore[`${column.fixed || 'main'}-body-wrapper`] || elemStore['main-body-wrapper']
-        const checkboxRangeElem = bodyWrapperElem.querySelector('.vxe-table--checkbox-range')
+        const bodyWrapperRef = elemStore[`${column.fixed || 'main'}-body-wrapper`] || elemStore['main-body-wrapper']
+        const bodyWrapperElem = bodyWrapperRef ? bodyWrapperRef.value : null
+        if (!bodyWrapperElem) {
+          return
+        }
+        const checkboxRangeElem = bodyWrapperElem.querySelector('.vxe-table--checkbox-range') as HTMLElement
         const domMousemove = document.onmousemove
         const domMouseup = document.onmouseup
         const trElem = cell.parentNode

package/packages/table/src/body.ts

@@ -480,8 +480,10 @@ export default defineComponent({
       const bodyElem = tableBody.$el as XEBodyScrollElement
       const leftElem = leftBody ? leftBody.$el as XEBodyScrollElement : null
       const rightElem = rightBody ? rightBody.$el as XEBodyScrollElement : null
-      const bodyYElem = elemStore['main-body-ySpace']
-      const bodyXElem = elemStore['main-body-xSpace']
+      const bodyYRef = elemStore['main-body-ySpace']
+      const bodyYElem = bodyYRef ? bodyYRef.value : null
+      const bodyXRef = elemStore['main-body-xSpace']
+      const bodyXElem = bodyXRef ? bodyXRef.value : null
       const bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight
       const bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth
       let scrollTop = scrollBodyElem.scrollTop
@@ -554,8 +556,10 @@ export default defineComponent({
       const leftElem = leftBody ? leftBody.$el as HTMLDivElement : null
       const rightElem = rightBody ? rightBody.$el as HTMLDivElement : null
       const bodyElem = tableBody.$el as HTMLDivElement
-      const bodyYElem = elemStore['main-body-ySpace']
-      const bodyXElem = elemStore['main-body-xSpace']
+      const bodyYRef = elemStore['main-body-ySpace']
+      const bodyYElem = bodyYRef ? bodyYRef.value : null
+      const bodyXRef = elemStore['main-body-xSpace']
+      const bodyXElem = bodyXRef ? bodyXRef.value : null
       const bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight
       const bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth
       const remainSize = isPrevWheelTop === isTopWheel ? Math.max(0, wheelYSize - wheelYTotal) : 0
@@ -649,13 +653,13 @@ export default defineComponent({
         const { elemStore } = tableInternalData
         const prefix = `${fixedType || 'main'}-body-`
         const el = refElem.value
-        elemStore[`${prefix}wrapper`] = refElem.value
-        elemStore[`${prefix}table`] = refBodyTable.value
-        elemStore[`${prefix}colgroup`] = refBodyColgroup.value
-        elemStore[`${prefix}list`] = refBodyTBody.value
-        elemStore[`${prefix}xSpace`] = refBodyXSpace.value
-        elemStore[`${prefix}ySpace`] = refBodyYSpace.value
-        elemStore[`${prefix}emptyBlock`] = refBodyEmptyBlock.value
+        elemStore[`${prefix}wrapper`] = refElem
+        elemStore[`${prefix}table`] = refBodyTable
+        elemStore[`${prefix}colgroup`] = refBodyColgroup
+        elemStore[`${prefix}list`] = refBodyTBody
+        elemStore[`${prefix}xSpace`] = refBodyXSpace
+        elemStore[`${prefix}ySpace`] = refBodyYSpace
+        elemStore[`${prefix}emptyBlock`] = refBodyEmptyBlock
         el.onscroll = scrollEvent
         el._onscroll = scrollEvent
       })

package/packages/table/src/table.ts

@@ -986,12 +986,17 @@ export default defineComponent({
      * 支持 px、%、固定 混合分配
      * 支持动态列表调整分配
      * 支持自动分配偏移量
-     * @param {Element} headerElem
-     * @param {Element} bodyElem
-     * @param {Element} footerElem
-     * @param {Number} bodyWidth
      */
-    const autoCellWidth = (headerElem: any, bodyElem: any, footerElem: any) => {
+    const autoCellWidth = () => {
+      const tableHeader = refTableHeader.value
+      const tableBody = refTableBody.value
+      const tableFooter = refTableFooter.value
+      const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+      const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
+      const footerElem = tableFooter ? tableFooter.$el as HTMLDivElement : null
+      if (!bodyElem) {
+        return
+      }
       let tableWidth = 0
       const minCellWidth = 40 // 列宽最少限制 40px
       const bodyWidth = bodyElem.clientWidth - 1
@@ -1086,6 +1091,7 @@ export default defineComponent({
           }
         })
       }
+      console.log(headerHeight)
       internalData.headerHeight = headerHeight
 
       let overflowX = false
@@ -1331,7 +1337,8 @@ export default defineComponent({
       const cellOffsetWidth = computeCellOffsetWidth.value
       const mouseOpts = computeMouseOpts.value
       const keyboardOpts = computeKeyboardOpts.value
-      const bodyWrapperElem = elemStore['main-body-wrapper']
+      const bodyWrapperRef = elemStore['main-body-wrapper']
+      const bodyWrapperElem = bodyWrapperRef ? bodyWrapperRef.value : null
       if (emptyPlaceholderElem) {
         emptyPlaceholderElem.style.top = `${headerHeight}px`
         emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - scrollbarHeight}px` : ''
@@ -1352,8 +1359,10 @@ export default defineComponent({
           fixedWrapperElem = isFixedLeft ? refLeftContainer.value : refRightContainer.value
         }
         layoutList.forEach(layout => {
-          const wrapperElem = elemStore[`${name}-${layout}-wrapper`]
-          const tableElem = elemStore[`${name}-${layout}-table`]
+          const wrapperRef = elemStore[`${name}-${layout}-wrapper`]
+          const wrapperElem = wrapperRef ? wrapperRef.value : null
+          const tableRef = elemStore[`${name}-${layout}-table`]
+          const tableElem = tableRef ? tableRef.value : null
           if (layout === 'header') {
             // 表头体样式处理
             // 横向滚动渲染
@@ -1383,12 +1392,14 @@ export default defineComponent({
               }
             }
 
-            const repairElem = elemStore[`${name}-${layout}-repair`]
+            const repairRef = elemStore[`${name}-${layout}-repair`]
+            const repairElem = repairRef ? repairRef.value : null
             if (repairElem) {
               repairElem.style.width = `${tableWidth}px`
             }
 
-            const listElem = elemStore[`${name}-${layout}-list`]
+            const listRef = elemStore[`${name}-${layout}-list`]
+            const listElem = listRef ? listRef.value : null
             if (isGroup && listElem) {
               XEUtils.arrayEach(listElem.querySelectorAll('.col--group'), (thElem: any) => {
                 const colNode = tableMethods.getColumnNode(thElem)
@@ -1415,7 +1426,8 @@ export default defineComponent({
               })
             }
           } else if (layout === 'body') {
-            const emptyBlockElem = elemStore[`${name}-${layout}-emptyBlock`]
+            const emptyBlockRef = elemStore[`${name}-${layout}-emptyBlock`]
+            const emptyBlockElem = emptyBlockRef ? emptyBlockRef.value : null
             if (isNodeElement(wrapperElem)) {
               if (customMaxHeight) {
                 wrapperElem.style.maxHeight = `${fixedType ? customMaxHeight - headerHeight - (showFooter ? 0 : scrollbarHeight) : customMaxHeight - headerHeight}px`
@@ -1489,7 +1501,8 @@ export default defineComponent({
               tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : ''
             }
           }
-          const colgroupElem = elemStore[`${name}-${layout}-colgroup`]
+          const colgroupRef = elemStore[`${name}-${layout}-colgroup`]
+          const colgroupElem = colgroupRef ? colgroupRef.value : null
           if (colgroupElem) {
             XEUtils.arrayEach(colgroupElem.children, (colElem: any) => {
               const colid = colElem.getAttribute('name')
@@ -1512,7 +1525,8 @@ export default defineComponent({
                 const showTitle = cellOverflow === 'title'
                 const showTooltip = cellOverflow === true || cellOverflow === 'tooltip'
                 let hasEllipsis = showTitle || showTooltip || showEllipsis
-                const listElem = elemStore[`${name}-${layout}-list`]
+                const listRef = elemStore[`${name}-${layout}-list`]
+                const listElem = listRef ? listRef.value : null
                 // 纵向虚拟滚动不支持动态行高
                 if (scrollYLoad && !hasEllipsis) {
                   hasEllipsis = true
@@ -1771,7 +1785,7 @@ export default defineComponent({
               childRecords = []
             }
             if (childRecords) {
-              tableMethods.loadTreeChildren(row, childRecords).then(childRows => {
+              return tableMethods.loadTreeChildren(row, childRecords).then(childRows => {
                 if (childRows.length && $xetable.findRowIndexOf(treeExpandeds, row) === -1) {
                   treeExpandeds.push(row)
                 }
@@ -1779,17 +1793,18 @@ export default defineComponent({
                 if (!checkStrictly && tableMethods.isCheckedByCheckboxRow(row)) {
                   tableMethods.setCheckboxRow(childRows, true)
                 }
-                nextTick().then(() => {
+                return nextTick().then(() => {
                   if (transform) {
                     return tablePrivateMethods.handleTableData()
                   }
-                }).then(() => {
-                  return tableMethods.recalculate()
-                }).then(() => resolve())
+                })
               })
-            } else {
-              nextTick().then(() => tableMethods.recalculate()).then(() => resolve())
             }
+          }).catch(() => {
+            rest.treeLoaded = false
+            XEUtils.remove(treeLazyLoadeds, item => $xetable.eqRow(item, row))
+          }).finally(() => {
+            nextTick().then(() => tableMethods.recalculate()).then(() => resolve())
           })
         } else {
           resolve()
@@ -1811,18 +1826,20 @@ export default defineComponent({
     }
 
     const handleAsyncRowExpand = (row: any): Promise<void> => {
-      const { rowExpandeds, expandLazyLoadeds } = reactData
       const { fullAllDataRowIdData } = internalData
-      const rest = fullAllDataRowIdData[getRowid($xetable, row)]
       return new Promise(resolve => {
         const expandOpts = computeExpandOpts.value
         const { loadMethod } = expandOpts
         if (loadMethod) {
-          expandLazyLoadeds.push(row)
-          loadMethod({ $table: $xetable, row, rowIndex: tableMethods.getRowIndex(row), $rowIndex: tableMethods.getVMRowIndex(row) }).catch((e: any) => e).then(() => {
+          const rest = fullAllDataRowIdData[getRowid($xetable, row)]
+          reactData.expandLazyLoadeds.push(row)
+          loadMethod({ $table: $xetable, row, rowIndex: tableMethods.getRowIndex(row), $rowIndex: tableMethods.getVMRowIndex(row) }).then(() => {
             rest.expandLoaded = true
-            XEUtils.remove(expandLazyLoadeds, item => $xetable.eqRow(item, row))
-            rowExpandeds.push(row)
+            reactData.rowExpandeds.push(row)
+          }).catch(() => {
+            rest.expandLoaded = false
+          }).finally(() => {
+            XEUtils.remove(reactData.expandLazyLoadeds, item => $xetable.eqRow(item, row))
             resolve(nextTick().then(() => tableMethods.recalculate()))
           })
         } else {
@@ -2945,21 +2962,13 @@ export default defineComponent({
        * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
        */
       recalculate (refull?: boolean) {
-        const tableHeader = refTableHeader.value
-        const tableBody = refTableBody.value
-        const tableFooter = refTableFooter.value
-        const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
-        const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
-        const footerElem = tableFooter ? tableFooter.$el as HTMLDivElement : null
-        if (bodyElem) {
-          autoCellWidth(headerElem, bodyElem, footerElem)
-          if (refull === true) {
-            // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-            return computeScrollLoad().then(() => {
-              autoCellWidth(headerElem, bodyElem, footerElem)
-              return computeScrollLoad()
-            })
-          }
+        autoCellWidth()
+        if (refull === true) {
+          // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+          return computeScrollLoad().then(() => {
+            autoCellWidth()
+            return computeScrollLoad()
+          })
         }
         return computeScrollLoad()
       },
@@ -5338,7 +5347,8 @@ export default defineComponent({
           containerList.forEach(name => {
             const layoutList = ['header', 'body', 'footer']
             layoutList.forEach(layout => {
-              const xSpaceElem = elemStore[`${name}-${layout}-xSpace`]
+              const xSpaceRef = elemStore[`${name}-${layout}-xSpace`]
+              const xSpaceElem = xSpaceRef ? xSpaceRef.value : null
               if (xSpaceElem) {
                 xSpaceElem.style.width = scrollXLoad ? `${tableWidth + (layout === 'header' ? scrollbarWidth : 0)}px` : ''
               }
@@ -5363,12 +5373,14 @@ export default defineComponent({
         }
         containerList.forEach(name => {
           const layoutList = ['header', 'body', 'footer']
-          const tableElem = elemStore[`${name}-body-table`]
+          const tableRef = elemStore[`${name}-body-table`]
+          const tableElem = tableRef ? tableRef.value : null
           if (tableElem) {
             tableElem.style.marginTop = marginTop
           }
           layoutList.forEach(layout => {
-            const ySpaceElem = elemStore[`${name}-${layout}-ySpace`]
+            const ySpaceRef = elemStore[`${name}-${layout}-ySpace`]
+            const ySpaceElem = ySpaceRef ? ySpaceRef.value : null
             if (ySpaceElem) {
               ySpaceElem.style.height = ySpaceHeight
             }
@@ -5377,14 +5389,14 @@ export default defineComponent({
         nextTick(updateStyle)
       },
       updateScrollXData () {
-        reactData.tableColumn = []
+        // reactData.tableColumn = []
         nextTick(() => {
           handleTableColumn()
           tablePrivateMethods.updateScrollXSpace()
         })
       },
       updateScrollYData () {
-        reactData.tableData = []
+        // reactData.tableData = []
         nextTick(() => {
           tablePrivateMethods.handleTableData()
           tablePrivateMethods.updateScrollYSpace()