vxe-table 3.15.7 → 3.15.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.15.7",
+  "version": "3.15.9",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^3.5.27"
+    "vxe-pc-ui": "^3.5.29"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.25.7",

package/packages/table/render/index.ts

@@ -360,7 +360,18 @@ function defaultEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandl
   ]
 }
 
-function radioAndCheckboxEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
+function checkboxEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
+  const { row, column } = params
+  const cellValue = getCellValue(row, column)
+  return [
+    h(getDefaultComponent(renderOpts), {
+      props: getCellEditProps(renderOpts, params, cellValue),
+      on: getEditOns(renderOpts, params)
+    })
+  ]
+}
+
+function radioAndCheckboxGroupEditRender (h: CreateElement, renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { options } = renderOpts
   const { row, column } = params
   const cellValue = getCellValue(row, column)
@@ -957,10 +968,13 @@ renderer.mixin({
     }
   },
   VxeRadioGroup: {
-    renderTableDefault: radioAndCheckboxEditRender
+    renderTableDefault: radioAndCheckboxGroupEditRender
+  },
+  VxeCheckbox: {
+    renderTableDefault: checkboxEditRender
   },
   VxeCheckboxGroup: {
-    renderTableDefault: radioAndCheckboxEditRender
+    renderTableDefault: radioAndCheckboxGroupEditRender
   },
   VxeSwitch: {
     tableAutoFocus: 'button',

package/packages/table/src/footer.ts

@@ -11,7 +11,7 @@ const renderType = 'footer'
 
 const { renderer, renderEmptyElement } = VxeUI
 
-function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.ColumnInfo[], footerTableData: any[], row: any, $rowIndex: number, _rowIndex: number) {
+function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableColumn: VxeTableDefines.ColumnInfo[], footerTableData: any[], row: any, $rowIndex: number, _rowIndex: number) {
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
@@ -45,10 +45,10 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
     const isPadding = XEUtils.isBoolean(footerCellOpts.padding) ? footerCellOpts.padding : cellOpts.padding
     const footOverflow = XEUtils.eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow
     const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
-    let showEllipsis = footOverflow === 'ellipsis'
+    const showEllipsis = footOverflow === 'ellipsis'
     const showTitle = footOverflow === 'title'
     const showTooltip = footOverflow === true || footOverflow === 'tooltip'
-    let hasEllipsis = showTitle || showTooltip || showEllipsis
+    const hasEllipsis = showTitle || showTooltip || showEllipsis
     const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
     const attrs: any = { colid }
     const tfOns: any = {}
@@ -74,10 +74,6 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
       type: renderType,
       data: footerTableData
     }
-    // 纵向虚拟滚动不支持动态行高
-    if (scrollXLoad && !hasEllipsis) {
-      showEllipsis = hasEllipsis = true
-    }
     if (showTitle || showTooltip || showAllTip) {
       tfOns.mouseenter = (evnt: MouseEvent) => {
         if (showTitle) {
@@ -135,7 +131,7 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
     let isVNPreEmptyStatus = false
-    if (!isMergeCell) {
+    if (isOptimizeMode && !isMergeCell) {
       if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
         isVNPreEmptyStatus = true
       }
@@ -199,7 +195,7 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
   })
 }
 
-function renderHeads (h: CreateElement, _vm: any, renderColumnList: VxeTableDefines.ColumnInfo[]) {
+function renderHeads (h: CreateElement, _vm: any, isOptimizeMode: boolean, renderColumnList: VxeTableDefines.ColumnInfo[]) {
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
@@ -228,7 +224,7 @@ function renderHeads (h: CreateElement, _vm: any, renderColumnList: VxeTableDefi
           ],
           style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) as VxeComponentStyleType : undefined
         }
-      }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
+      }, renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
     }
     return h('tr', {
       key: $rowIndex,
@@ -237,7 +233,7 @@ function renderHeads (h: CreateElement, _vm: any, renderColumnList: VxeTableDefi
         footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
       ],
       style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) as VxeComponentStyleType : undefined
-    }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
+    }, renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
   })
 }
 
@@ -304,12 +300,12 @@ export default {
     const { fixedType, fixedColumn, tableColumn } = props
     const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps
     const { visibleColumn, fullColumnIdData } = tableInternalData
-    const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
+    const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData
 
     let renderColumnList = tableColumn as VxeTableDefines.ColumnInfo[]
     let isOptimizeMode = false
     // 如果是使用优化模式
-    if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+    if (scrollXLoad && allColumnFooterOverflow) {
       if (spanMethod || footerSpanMethod) {
         // 如果不支持优化模式
       } else {
@@ -317,7 +313,7 @@ export default {
       }
     }
 
-    if (!isColLoading && (fixedType || !overflowX)) {
+    if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
       renderColumnList = visibleColumn
     }
 
@@ -405,7 +401,7 @@ export default {
          */
           h('tfoot', {
             ref: 'refFooterTFoot'
-          }, renderHeads(h, this, renderColumnList))
+          }, renderHeads(h, this, isOptimizeMode, renderColumnList))
         ])
       ])
     ])

package/packages/table/src/header.ts

@@ -42,10 +42,10 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding
     const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
     const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
-    let showEllipsis = headOverflow === 'ellipsis'
+    const showEllipsis = headOverflow === 'ellipsis'
     const showTitle = headOverflow === 'title'
     const showTooltip = headOverflow === true || headOverflow === 'tooltip'
-    let hasEllipsis = showTitle || showTooltip || showEllipsis
+    const hasEllipsis = showTitle || showTooltip || showEllipsis
     let hasFilter = false
     let firstFilterOption: VxeColumnPropTypes.FilterItem | null = null
     if (filters) {
@@ -54,7 +54,20 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     }
     const columnIndex = colRest.index
     const _columnIndex = colRest._index
-    const cellParams = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter }
+    const cellParams = {
+      $table: $xeTable,
+      $grid: $xeGrid,
+      $rowIndex,
+      column,
+      columnIndex,
+      $columnIndex,
+      _columnIndex,
+      firstFilterOption,
+      fixed: fixedType,
+      type: cellType,
+      isHidden: fixedHiddenColumn,
+      hasFilter
+    }
     const thAttrs: Record<string, string | number | null> = {
       colid,
       colspan: column.colSpan > 1 ? column.colSpan : null,
@@ -64,10 +77,6 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
       click: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
       dblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
     }
-    // 虚拟滚动不支持动态高度
-    if (scrollXLoad && !hasEllipsis) {
-      showEllipsis = hasEllipsis = true
-    }
     const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell'
     let isDisabledDrag = false
     if (isColDragCell) {
@@ -91,7 +100,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
     let isVNPreEmptyStatus = false
-    if (!isGroup) {
+    if (isOptimizeMode && !isGroup) {
       if (!dragCol || dragCol.id !== colid) {
         if (scrollXLoad && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
           isVNPreEmptyStatus = true
@@ -274,7 +283,7 @@ export default {
     const { headerColumn } = this
 
     const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
-    const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
+    const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData
     const { visibleColumn, fullColumnIdData } = tableInternalData
 
     const mouseOpts = $xeTable.computeMouseOpts
@@ -286,7 +295,7 @@ export default {
       renderColumnList = visibleColumn
     } else {
       // 如果是使用优化模式
-      if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+      if (scrollXLoad && allColumnHeaderOverflow) {
         if (spanMethod || footerSpanMethod) {
           // 如果不支持优化模式
         } else {
@@ -294,7 +303,7 @@ export default {
         }
       }
 
-      if (!isColLoading && (fixedType || !overflowX)) {
+      if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
         renderColumnList = visibleColumn
       }
 

package/packages/table/src/methods.ts

@@ -861,7 +861,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const internalData = $xeTable as unknown as TableInternalData
 
   const { showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props
-  const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn } = reactData
+  const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn, isColLoading } = reactData
   const { visibleColumn, tableHeight, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData
   const el = $xeTable.$refs.refElem as HTMLDivElement
   if (!el) {
@@ -977,7 +977,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
           renderColumnList = visibleColumn
         } else {
           // 如果是使用优化模式
-          if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+          if (scrollXLoad && allColumnHeaderOverflow) {
             if (spanMethod || footerSpanMethod) {
               // 如果不支持优化模式
             } else {
@@ -985,8 +985,11 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
             }
           }
 
-          if (fixedType) {
+          if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
             renderColumnList = visibleColumn
+          }
+
+          if (fixedType) {
             // 如果是使用优化模式
             if (isOptimizeMode) {
               renderColumnList = fixedColumn || []
@@ -1083,7 +1086,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
         let renderColumnList = tableColumn
         let isOptimizeMode = false
         // 如果是使用优化模式
-        if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+        if (scrollXLoad && allColumnFooterOverflow) {
           if (spanMethod || footerSpanMethod) {
             // 如果不支持优化模式
           } else {
@@ -1091,8 +1094,11 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
           }
         }
 
-        if (fixedType) {
+        if (!isOptimizeMode) {
           renderColumnList = visibleColumn
+        }
+
+        if (fixedType) {
           if (isOptimizeMode) {
             renderColumnList = fixedColumn || []
           }

package/packages/ui/index.ts

@@ -220,8 +220,8 @@ VxeUI.setConfig({
       oSize: 2
     },
     scrollbarConfig: {
-      // width: 0,
-      // height: 0
+      width: 14,
+      height: 14
     }
   },
   // export: {

package/styles/components/table.scss

@@ -990,12 +990,6 @@
     position: relative;
     line-height: var(--vxe-ui-table-row-line-height);
     text-align: left;
-    &.col--current {
-      background-color: var(--vxe-ui-table-column-current-background-color);
-      // .vxe-cell--tree-btn {
-      //   background-color: var(--vxe-ui-table-column-current-background-color);
-      // }
-    }
     &.col--center {
       text-align: center;
       & > .vxe-cell {
@@ -1009,17 +1003,6 @@
       }
     }
   }
-  // &.is--tree-line {
-  //   .vxe-header--column,
-  //   .vxe-body--column,
-  //   .vxe-footer--column {
-  //     &.col--current {
-  //       .vxe-cell--tree-btn {
-  //         background-color: var(--vxe-ui-table-column-current-background-color);
-  //       }
-  //     }
-  //   }
-  // }
   .vxe-header--column,
   .vxe-footer--column {
     &.col--ellipsis {
@@ -1043,6 +1026,36 @@
         background-color: var(--vxe-ui-table-row-striped-background-color);
       }
     }
+  }
+
+  // 列高亮
+  .vxe-header--column,
+  .vxe-body--column,
+  .vxe-footer--column {
+    position: relative;
+    line-height: var(--vxe-ui-table-row-line-height);
+    text-align: left;
+    &.col--current {
+      background-color: var(--vxe-ui-table-column-current-background-color);
+      // .vxe-cell--tree-btn {
+      //   background-color: var(--vxe-ui-table-column-current-background-color);
+      // }
+    }
+  }
+  // &.is--tree-line {
+  //   .vxe-header--column,
+  //   .vxe-body--column,
+  //   .vxe-footer--column {
+  //     &.col--current {
+  //       .vxe-cell--tree-btn {
+  //         background-color: var(--vxe-ui-table-column-current-background-color);
+  //       }
+  //     }
+  //   }
+  // }
+
+  // 行高亮
+  .vxe-body--row {
     &.row--radio {
       & > .vxe-body--column {
         background-color: var(--vxe-ui-table-row-radio-checked-background-color);