vxe-table 4.13.32 → 4.13.34

package/packages/table/src/cell.ts

@@ -282,14 +282,18 @@ function getDefaultCellLabel (params: VxeTableDefines.CellRenderBodyParams) {
 function renderCellHandle (params: VxeTableDefines.CellRenderBodyParams & {
   $table: VxeTableConstructor & VxeTablePrivateMethods;
 }) {
-  const { column, $table } = params
+  const { column, row, $table } = params
   const tableProps = $table.props
+  const tableReactData = $table.reactData
+  const { isRowGroupStatus } = tableReactData
   const { editConfig } = tableProps
   const { type, treeNode, rowGroupNode, editRender } = column
-  const { computeEditOpts, computeCheckboxOpts } = $table.getComputeMaps()
+  const { computeEditOpts, computeCheckboxOpts, computeRowGroupOpts } = $table.getComputeMaps()
+  const rowGroupOpts = computeRowGroupOpts.value
+  const { mode } = rowGroupOpts
   const checkboxOpts = computeCheckboxOpts.value
   const editOpts = computeEditOpts.value
-  const isDeepCell = treeNode || rowGroupNode
+  const isDeepCell = treeNode || (isRowGroupStatus && row.isAggregate && (mode === 'column' ? column.field === row.groupField : rowGroupNode))
   switch (type) {
     case 'seq':
       return isDeepCell ? Cell.renderDeepIndexCell(params) : Cell.renderSeqCell(params)
@@ -393,7 +397,7 @@ export const Cell = {
     const tableReactData = $table.reactData
     const tableInternalData = $table.internalData
     const { isRowGroupStatus } = tableReactData
-    const { slots, editRender, cellRender, rowGroupNode } = column
+    const { field, slots, editRender, cellRender, rowGroupNode } = column
     const renderOpts = editRender || cellRender
     const defaultSlot = slots ? slots.default : null
     if (defaultSlot) {
@@ -411,30 +415,37 @@ export const Cell = {
       }
     }
     let cellValue: string | number | null = ''
-    if (isRowGroupStatus && rowGroupNode && row.isAggregate) {
+    if (isRowGroupStatus && row.isAggregate) {
       const { fullColumnFieldData } = tableInternalData
       const { computeRowGroupOpts } = $table.getComputeMaps()
       const rowGroupOpts = computeRowGroupOpts.value
-      const { showTotal, totalMethod, contentMethod, mapChildrenField } = rowGroupOpts
+      const { mode, showTotal, totalMethod, countFields, countMethod, contentMethod, mapChildrenField } = rowGroupOpts
       const groupField = row.groupField
-      cellValue = row.groupContent
+      const groupContent = row.groupContent
       const childList = mapChildrenField ? (row[mapChildrenField] || []) : []
-      const totalValue = childList.length
+      const totalValue = row.childCount
       const colRest = fullColumnFieldData[groupField] || {}
       const params = {
         $table,
         groupField,
         groupColumn: (colRest ? colRest.column : null) as VxeTableDefines.ColumnInfo,
         column,
-        groupValue: cellValue,
+        groupValue: groupContent,
         children: childList,
         totalValue: totalValue
       }
-      if (contentMethod) {
-        cellValue = `${contentMethod(params)}`
-      }
-      if (showTotal) {
-        cellValue = getI18n('vxe.table.rowGroupContentTotal', [cellValue, totalMethod ? totalMethod(params) : totalValue, totalValue])
+      if (mode === 'column' ? column.field === row.groupField : rowGroupNode) {
+        cellValue = groupContent
+        if (contentMethod) {
+          cellValue = `${contentMethod(params)}`
+        }
+        if (showTotal) {
+          cellValue = getI18n('vxe.table.rowGroupContentTotal', [cellValue, totalMethod ? totalMethod(params) : totalValue, totalValue])
+        }
+      } else if (countFields && countFields.includes(field)) {
+        if (countMethod) {
+          cellValue = `${countMethod(params)}`
+        }
       }
     } else if (!(isRowGroupStatus && row.isAggregate)) {
       cellValue = $table.getCellLabel(row, column)
@@ -575,10 +586,15 @@ export const Cell = {
    * 行分组、树结构
    */
   renderDeepNodeBtn (params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }, cellVNodes: VxeComponentSlotType[]) {
-    const { row, column } = params
+    const { $table, row, column } = params
     const { rowGroupNode } = column
-    if (rowGroupNode && row.isAggregate) {
-      return [Cell.renderRowGroupBtn(params, cellVNodes)]
+    if (row.isAggregate) {
+      const { computeRowGroupOpts } = $table.getComputeMaps()
+      const rowGroupOpts = computeRowGroupOpts.value
+      const { mode } = rowGroupOpts
+      if (mode === 'column' ? column.field === row.groupField : rowGroupNode) {
+        return [Cell.renderRowGroupBtn(params, cellVNodes)]
+      }
     }
     return [Cell.renderTreeNodeBtn(params, cellVNodes)]
   },

package/packages/table/src/table.ts

@@ -508,11 +508,11 @@ export default defineComponent({
     })
 
     const computeVirtualXOpts = computed(() => {
-      return Object.assign({}, getConfig().table.scrollX, getConfig().table.virtualXConfig, props.scrollX, props.virtualXConfig) as VxeTablePropTypes.VirtualXConfig & { gt: number }
+      return Object.assign({}, getConfig().table.virtualXConfig || getConfig().table.scrollX, props.virtualXConfig || props.scrollX) as VxeTablePropTypes.VirtualXConfig & { gt: number }
     })
 
     const computeVirtualYOpts = computed(() => {
-      return Object.assign({}, getConfig().table.scrollY, getConfig().table.virtualYConfig, props.scrollY, props.virtualYConfig) as VxeTablePropTypes.VirtualYConfig & { gt: number }
+      return Object.assign({}, getConfig().table.virtualYConfig || getConfig().table.scrollY, props.virtualYConfig || props.scrollY) as VxeTablePropTypes.VirtualYConfig & { gt: number }
     })
 
     const computeScrollbarOpts = computed(() => {
@@ -1058,7 +1058,7 @@ export default defineComponent({
           }
         }
         let visibleSize = 0
-        const toVisibleIndex = Math.max(0, leftIndex < visibleColumn.length ? leftIndex - 2 : 0)
+        const toVisibleIndex = leftIndex === visibleColumn.length ? leftIndex : Math.max(0, leftIndex < visibleColumn.length ? leftIndex - 2 : 0)
         for (let cIndex = toVisibleIndex, cLen = visibleColumn.length; cIndex < cLen; cIndex++) {
           const column = visibleColumn[cIndex]
           const colid = column.id
@@ -1145,7 +1145,7 @@ export default defineComponent({
               rightIndex = rIndex
             }
           }
-          toVisibleIndex = Math.max(0, leftIndex < afterFullData.length ? leftIndex - 2 : 0)
+          toVisibleIndex = leftIndex === afterFullData.length ? leftIndex : Math.max(0, leftIndex < afterFullData.length ? leftIndex - 2 : 0)
           for (let rIndex = toVisibleIndex, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
             const row = afterFullData[rIndex]
             const rowid = handleGetRowId(row)
@@ -3155,6 +3155,7 @@ export default defineComponent({
           const groupField = rgItem.field
           const groupColumn = $xeTable.getColumnByField(groupField)
           const groupMaps: Record<string, any[]> = {}
+          const groupList: any[] = []
           const rowkey = getRowkey($xeTable)
           list.forEach((row) => {
             const cellValue = groupColumn ? $xeTable.getCellLabel(row, groupColumn) : XEUtils.get(row, groupField)
@@ -3171,8 +3172,10 @@ export default defineComponent({
           })
           XEUtils.objectEach(groupMaps, (childList, groupValue) => {
             const { fullData: childFullData, treeData: childTreeData } = handleGroupData(childList, rowGroups.slice(1))
+            const childCount = 0
             const groupRow = {
               isAggregate: true,
+              childCount,
               groupContent: groupValue,
               groupField,
               [rowField]: getRowUniqueId(),
@@ -3187,12 +3190,24 @@ export default defineComponent({
             if (indeterminateField) {
               groupRow[indeterminateField] = false
             }
+            groupList.push(groupRow)
             treeData.push(groupRow)
             fullData.push(groupRow)
             if (childFullData.length) {
               fullData.push(...childFullData)
             }
           })
+          XEUtils.lastEach(groupList, groupItem => {
+            let count = 0
+            XEUtils.each(groupItem[childrenField], row => {
+              if (row.isAggregate) {
+                count += row[childrenField] ? row[childrenField].length : 0
+              } else {
+                count++
+              }
+            })
+            groupItem.childCount = count
+          })
         }
       }
       return {

package/packages/ui/index.ts

@@ -207,13 +207,13 @@ VxeUI.setConfig({
       isReplace: true
     },
     virtualXConfig: {
-      // enabled: false,
+      enabled: true,
       gt: 24,
       preSize: 1,
       oSize: 0
     },
     virtualYConfig: {
-      // enabled: false,
+      enabled: true,
       gt: 100,
       preSize: 1,
       oSize: 0

package/styles/components/table.scss

@@ -1000,15 +1000,6 @@ $btnThemeList: (
       }
     }
   }
-  &.column--highlight {
-    .vxe-header--column {
-      &:not(.col--seq) {
-        &:hover {
-          background-color: var(--vxe-ui-table-column-hover-background-color);
-        }
-      }
-    }
-  }
   &.header-cell--area {
     .vxe-table--header-wrapper {
       user-select: none;
@@ -1090,6 +1081,16 @@ $btnThemeList: (
   }
 
   // 列高亮
+  &.column--highlight {
+    .vxe-header--column {
+      &:hover {
+        background-color: var(--vxe-ui-table-column-hover-background-color);
+        &.col--current {
+          background-color: var(--vxe-ui-table-column-hover-current-background-color);
+        }
+      }
+    }
+  }
   .vxe-header--column,
   .vxe-body--column,
   .vxe-footer--column {
@@ -1135,6 +1136,9 @@ $btnThemeList: (
     &.row--hover {
       & > .vxe-body--column {
         background-color: var(--vxe-ui-table-row-hover-background-color);
+        &.col--current {
+          background-color: var(--vxe-ui-table-column-current-background-color);
+        }
       }
       &.row--stripe {
         & > .vxe-body--column {

package/styles/theme/base.scss

@@ -36,8 +36,6 @@
   --vxe-ui-table-row-height-mini: 36px;
   --vxe-ui-table-row-line-height: 22px;
 
-  --vxe-ui-table-column-hover-background-color: #d7effb;
-  --vxe-ui-table-column-current-background-color: #e6f7ff;
   --vxe-ui-table-column-icon-border-color: #c0c4cc;
   --vxe-ui-table-column-icon-border-hover-color: #515A6E;
 

package/styles/theme/dark.scss

@@ -31,6 +31,9 @@
   /*table*/
   --vxe-ui-table-header-background-color: #28282a;
   --vxe-ui-table-column-to-row-background-color: #28282a;
+  --vxe-ui-table-column-hover-background-color: #242f3b;
+  --vxe-ui-table-column-current-background-color: #18222c;
+  --vxe-ui-table-column-hover-current-background-color: #242f3b;
   --vxe-ui-table-border-color: #37373a;
   --vxe-ui-table-row-hover-background-color: #262727;
   --vxe-ui-table-row-striped-background-color: #1D1D1D;
@@ -40,7 +43,7 @@
   --vxe-ui-table-row-checkbox-checked-background-color: #604820;
   --vxe-ui-table-row-hover-checkbox-checked-background-color: #6e5326;
   --vxe-ui-table-row-current-background-color: #18222c;
-  --vxe-ui-table-row-hover-current-background-color: #262727;
+  --vxe-ui-table-row-hover-current-background-color: #242f3b;
   --vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.8);
   --vxe-ui-table-drag-over-background-color:rgba(48, 48, 0, 0.3);
 }

package/styles/theme/light.scss

@@ -27,6 +27,9 @@
   /*table*/
   --vxe-ui-table-header-background-color: #{light_variable.$vxe-ui-table-header-background-color};
   --vxe-ui-table-column-to-row-background-color: #{light_variable.$vxe-ui-table-column-to-row-background-color};
+  --vxe-ui-table-column-hover-background-color: #{light_variable.$vxe-ui-table-column-hover-background-color};
+  --vxe-ui-table-column-current-background-color: #{light_variable.$vxe-ui-table-column-current-background-color};
+  --vxe-ui-table-column-hover-current-background-color: #{light_variable.$vxe-ui-table-column-hover-current-background-color};
   --vxe-ui-table-border-color: #{light_variable.$vxe-ui-table-border-color};
   --vxe-ui-table-row-hover-background-color: #{light_variable.$vxe-ui-table-row-hover-background-color};
   --vxe-ui-table-row-striped-background-color: #{light_variable.$vxe-ui-table-row-striped-background-color};

package/styles/variable.scss

@@ -26,6 +26,9 @@ $vxe-ui-loading-background-color: rgba(255, 255, 255, 0.5) !default;
 /*table*/
 $vxe-ui-table-header-background-color: #f8f8f9 !default;
 $vxe-ui-table-column-to-row-background-color: #f8f8f9 !default;
+$vxe-ui-table-column-hover-background-color: #d7effb !default;
+$vxe-ui-table-column-current-background-color: #e6f7ff !default;
+$vxe-ui-table-column-hover-current-background-color: #d7effb !default;
 $vxe-ui-table-border-color: #e8eaec !default;
 $vxe-ui-table-row-hover-background-color: #f5f7fa !default;
 $vxe-ui-table-row-striped-background-color: #fafafa !default;
@@ -38,4 +41,4 @@ $vxe-ui-table-row-current-background-color: #e6f7ff !default;
 $vxe-ui-table-row-hover-current-background-color: #d7effb !default;
 $vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.12) !default;
 $vxe-ui-table-drag-over-background-color:rgba(255,255,200,0.3) !default;
-
+