vxe-table 4.11.0-beta.10 → 4.11.0-beta.2

package/packages/table/src/footer.ts

@@ -267,7 +267,7 @@ export default defineComponent({
       const { fixedType, fixedColumn, tableColumn } = props
       const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps
       const { visibleColumn, fullColumnIdData } = tableInternalData
-      const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
+      const { isGroup, scrollXLoad, scrollYLoad, dragCol } = tableReactData
 
       let renderColumnList = tableColumn
       let isOptimizeMode = false
@@ -280,11 +280,8 @@ export default defineComponent({
         }
       }
 
-      if (fixedType || !overflowX) {
-        renderColumnList = visibleColumn
-      }
-
       if (fixedType) {
+        renderColumnList = visibleColumn
         if (isOptimizeMode) {
           renderColumnList = fixedColumn || []
         }

package/packages/table/src/header.ts

@@ -142,8 +142,8 @@ export default defineComponent({
             'is--sortable': column.sortable,
             'col--filter': !!filters,
             'is--filter-active': hasFilter,
-            'is--drag-active': columnOpts.drag && !column.fixed && !isDisabledDrag && (isCrossDrag || isPeerDrag || !column.parentId),
-            'is--drag-disabled': columnOpts.drag && isDisabledDrag,
+            'is--drag-active': !column.fixed && !isDisabledDrag && (isCrossDrag || isPeerDrag || !column.parentId),
+            'is--drag-disabled': isDisabledDrag,
             'col--current': currentColumn === column
           },
           headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(cellParams) : headerClassName) : '',
@@ -223,7 +223,7 @@ export default defineComponent({
     const renderVN = () => {
       const { fixedType, fixedColumn, tableColumn } = props
       const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
-      const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
+      const { isGroup, scrollXLoad, scrollYLoad, dragCol } = tableReactData
       const { visibleColumn, fullColumnIdData } = tableInternalData
 
       const mouseOpts = computeMouseOpts.value
@@ -243,11 +243,8 @@ export default defineComponent({
           }
         }
 
-        if (fixedType || !overflowX) {
-          renderColumnList = visibleColumn
-        }
-
         if (fixedType) {
+          renderColumnList = visibleColumn
           // 如果是使用优化模式
           if (isOptimizeMode) {
             renderColumnList = fixedColumn || []

package/packages/table/src/table.ts

@@ -1247,7 +1247,6 @@ export default defineComponent({
       const fullColumnIdData: Record<string, VxeTableDefines.ColumnCacheItem> = internalData.fullColumnIdData = {}
       const fullColumnFieldData: Record<string, VxeTableDefines.ColumnCacheItem> = internalData.fullColumnFieldData = {}
       const mouseOpts = computeMouseOpts.value
-      const expandOpts = computeExpandOpts.value
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
       const { isCrossDrag, isSelfToChildDrag } = columnDragOpts
@@ -1334,8 +1333,10 @@ export default defineComponent({
         tableFullColumn.forEach(handleFunc)
       }
 
-      if ((expandColumn && expandOpts.mode !== 'fixed') && mouseOpts.area) {
-        errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand'])
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
+        if (expandColumn && mouseOpts.area) {
+          errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand'])
+        }
       }
 
       if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -2606,10 +2607,7 @@ export default defineComponent({
               delete rExpandLazyLoadedMaps[rowid]
             }
             reactData.rowExpandLazyLoadedMaps = rExpandLazyLoadedMaps
-            nextTick()
-              .then(() => $xeTable.recalculate())
-              .then(() => $xeTable.updateCellAreas())
-              .then(() => resolve())
+            nextTick().then(() => tableMethods.recalculate()).then(() => resolve())
           })
         } else {
           resolve()
@@ -3091,7 +3089,6 @@ export default defineComponent({
     }
 
     const handleColumn = (collectColumn: VxeTableDefines.ColumnInfo[]) => {
-      const expandOpts = computeExpandOpts.value
       internalData.collectColumn = collectColumn
       const tableFullColumn = getColumnList(collectColumn)
       internalData.tableFullColumn = tableFullColumn
@@ -3101,7 +3098,6 @@ export default defineComponent({
       return Promise.resolve(
         restoreCustomStorage()
       ).then(() => {
-        const { scrollXLoad, scrollYLoad, expandColumn } = reactData
         cacheColumnMap()
         parseColumns(true).then(() => {
           if (reactData.scrollXLoad) {
@@ -3111,11 +3107,11 @@ export default defineComponent({
         $xeTable.clearMergeCells()
         $xeTable.clearMergeFooterItems()
         $xeTable.handleTableData(true)
-
-        if ((scrollXLoad || scrollYLoad) && (expandColumn && expandOpts.mode !== 'fixed')) {
-          warnLog('vxe.error.scrollErrProp', ['column.type=expand'])
-        }
-
+        // if (process.env.VUE_APP_VXE_ENV === 'development') {
+        //   if ((reactData.scrollXLoad || reactData.scrollYLoad) && reactData.expandColumn) {
+        //     warnLog('vxe.error.scrollErrProp', ['column.type=expand'])
+        //   }
+        // }
         return nextTick().then(() => {
           if ($xeToolbar) {
             $xeToolbar.syncUpdate({
@@ -3499,15 +3495,6 @@ export default defineComponent({
       }
     }
 
-    const handleRowExpandScroll = () => {
-      const { elemStore } = internalData
-      const rowExpandEl = refRowExpandElem.value
-      const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      if (rowExpandEl && bodyScrollElem) {
-        rowExpandEl.scrollTop = bodyScrollElem.scrollTop
-      }
-    }
-
     tableMethods = {
       dispatchEvent,
       /**
@@ -5224,14 +5211,14 @@ export default defineComponent({
        * @param {Boolean} expanded 是否展开
        */
       setRowExpand (rows, expanded) {
-        const { rowExpandedMaps, rowExpandLazyLoadedMaps, expandColumn } = reactData
+        const { rowExpandedMaps, rowExpandLazyLoadedMaps, expandColumn: column } = reactData
         const { fullAllDataRowIdData } = internalData
         let rExpandedMaps = { ...rowExpandedMaps }
         const expandOpts = computeExpandOpts.value
         const { reserve, lazy, accordion, toggleMethod } = expandOpts
         const lazyRests: any[] = []
-        const columnIndex = $xeTable.getColumnIndex(expandColumn)
-        const $columnIndex = $xeTable.getVMColumnIndex(expandColumn)
+        const columnIndex = tableMethods.getColumnIndex(column)
+        const $columnIndex = tableMethods.getVMColumnIndex(column)
         if (rows) {
           if (!XEUtils.isArray(rows)) {
             rows = [rows]
@@ -5241,7 +5228,7 @@ export default defineComponent({
             rExpandedMaps = {}
             rows = rows.slice(rows.length - 1, rows.length)
           }
-          const validRows: any[] = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column: expandColumn, columnIndex, $columnIndex, row, rowIndex: tableMethods.getRowIndex(row), $rowIndex: tableMethods.getVMRowIndex(row) })) : rows
+          const validRows: any[] = toggleMethod ? rows.filter((row: any) => toggleMethod({ $table: $xeTable, expanded, column, columnIndex, $columnIndex, row, rowIndex: tableMethods.getRowIndex(row), $rowIndex: tableMethods.getVMRowIndex(row) })) : rows
           if (expanded) {
             validRows.forEach((row: any) => {
               const rowid = getRowid($xeTable, row)
@@ -5264,19 +5251,11 @@ export default defineComponent({
             })
           }
           if (reserve) {
-            validRows.forEach((row) => handleRowExpandReserve(row, expanded))
+            validRows.forEach((row: any) => handleRowExpandReserve(row, expanded))
           }
         }
         reactData.rowExpandedMaps = rExpandedMaps
-        return Promise.all(lazyRests)
-          .then(() => $xeTable.recalculate())
-          .then(() => {
-            if (expandColumn) {
-              updateRowExpandStyle()
-              handleRowExpandScroll()
-            }
-            return $xeTable.updateCellAreas()
-          })
+        return Promise.all(lazyRests).then(() => tableMethods.recalculate())
       },
       /**
        * 判断行是否为展开状态
@@ -5310,7 +5289,7 @@ export default defineComponent({
           if (expList.length) {
             tableMethods.recalculate()
           }
-        }).then(() => $xeTable.updateCellAreas())
+        })
       },
       clearRowExpandReserve () {
         internalData.rowExpandedReserveRowMap = {}
@@ -5733,8 +5712,8 @@ export default defineComponent({
       updateCellAreas () {
         const { mouseConfig } = props
         const mouseOpts = computeMouseOpts.value
-        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreaEvent) {
-          return $xeTable.handleRecalculateCellAreaEvent()
+        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
+          return $xeTable.handleRecalculateCellAreas()
         }
         return nextTick()
       },
@@ -7405,7 +7384,7 @@ export default defineComponent({
             vLen++
           })
 
-        const isSelected = rootList.length > 0 ? (vLen > 0 ? (sLen >= vLen) : (sLen >= rootList.length)) : false
+        const isSelected = vLen > 0 ? sLen >= vLen : sLen >= rootList.length
         const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1)
 
         reactData.isAllSelected = isSelected
@@ -9067,7 +9046,7 @@ export default defineComponent({
       updateScrollYStatus,
       // 更新横向 X 可视渲染上下剩余空间大小
       updateScrollXSpace () {
-        const { isGroup, scrollXLoad, overflowX } = reactData
+        const { isGroup, scrollXLoad } = reactData
         const { visibleColumn, scrollXStore, elemStore, tableWidth } = internalData
         const tableHeader = refTableHeader.value
         const tableBody = refTableBody.value
@@ -9081,7 +9060,7 @@ export default defineComponent({
           const footerElem = tableFooterElem ? tableFooterElem.querySelector('.vxe-table--footer') as HTMLTableElement : null
           const leftSpaceWidth = visibleColumn.slice(0, scrollXStore.startIndex).reduce((previous, column) => previous + column.renderWidth, 0)
           let marginLeft = ''
-          if (scrollXLoad && overflowX) {
+          if (scrollXLoad) {
             marginLeft = `${leftSpaceWidth}px`
           }
           if (headerElem) {
@@ -9909,8 +9888,7 @@ export default defineComponent({
         warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)'])
       }
       loadTableData(value, true).then(() => {
-        const { scrollXLoad, scrollYLoad, expandColumn } = reactData
-        const expandOpts = computeExpandOpts.value
+        // const { scrollXLoad, scrollYLoad, expandColumn } = reactData
         internalData.inited = true
         internalData.initStatus = true
         if (!initStatus) {
@@ -9921,9 +9899,9 @@ export default defineComponent({
         // if (checkboxColumn && internalData.tableFullData.length > 300 && !checkboxOpts.checkField) {
         //   warnLog('vxe.error.checkProp', ['checkbox-config.checkField'])
         // }
-        if ((scrollXLoad || scrollYLoad) && (expandColumn && expandOpts.mode !== 'fixed')) {
-          warnLog('vxe.error.scrollErrProp', ['column.type=expand'])
-        }
+        // if ((scrollXLoad || scrollYLoad) && expandColumn) {
+        //   warnLog('vxe.error.scrollErrProp', ['column.type=expand'])
+        // }
         return tableMethods.recalculate()
       })
     })
@@ -9972,12 +9950,6 @@ export default defineComponent({
     watch(() => props.showFooter, () => {
       reScrollFlag.value++
     })
-    watch(() => reactData.overflowX, () => {
-      reScrollFlag.value++
-    })
-    watch(() => reactData.overflowY, () => {
-      reScrollFlag.value++
-    })
     watch(reScrollFlag, () => {
       nextTick(() => {
         tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())

package/styles/components/table.scss

@@ -271,7 +271,7 @@
   display: none;
   position: absolute;
   pointer-events: none;
-  z-index: 6;
+  z-index: 1;
 }
 
 .vxe-table--header-wrapper {