vxe-table 4.13.7 → 4.13.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.13.7",
+  "version": "4.13.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": "^4.5.27"
+    "vxe-pc-ui": "^4.5.29"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

package/packages/table/render/index.ts

@@ -358,7 +358,18 @@ function defaultEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEdit
   ]
 }
 
-function radioAndCheckboxEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
+function checkboxEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
+  const { row, column } = params
+  const cellValue = getCellValue(row, column)
+  return [
+    h(getDefaultComponent(renderOpts), {
+      ...getCellEditProps(renderOpts, params, cellValue),
+      ...getEditOns(renderOpts, params)
+    })
+  ]
+}
+
+function radioAndCheckboxGroupEditRender (renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions, params: VxeGlobalRendererHandles.RenderEditParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
   const { options } = renderOpts
   const { row, column } = params
   const cellValue = getCellValue(row, column)
@@ -948,10 +959,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

@@ -43,7 +43,7 @@ export default defineComponent({
     const refFooterTFoot = ref() as Ref<HTMLTableSectionElement>
     const refFooterXSpace = ref() as Ref<HTMLDivElement>
 
-    const renderRows = (tableColumn: VxeTableDefines.ColumnInfo[], footerTableData: any[], row: any, $rowIndex: number, _rowIndex: number) => {
+    const renderRows = (isOptimizeMode: boolean, tableColumn: VxeTableDefines.ColumnInfo[], footerTableData: any[], row: any, $rowIndex: number, _rowIndex: number) => {
       const $xeGrid = $xeTable.xeGrid
 
       const { fixedType } = props
@@ -72,10 +72,10 @@ export default defineComponent({
         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 = {}
@@ -101,10 +101,6 @@ export default defineComponent({
           type: renderType,
           data: footerTableData
         }
-        // 纵向虚拟滚动不支持动态行高
-        if (scrollXLoad && !hasEllipsis) {
-          showEllipsis = hasEllipsis = true
-        }
         if (showTitle || showTooltip || showAllTip) {
           tfOns.onMouseenter = (evnt: MouseEvent) => {
             if (showTitle) {
@@ -162,7 +158,7 @@ export default defineComponent({
         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
           }
@@ -222,7 +218,7 @@ export default defineComponent({
       })
     }
 
-    const renderHeads = (renderColumnList: VxeTableDefines.ColumnInfo[]) => {
+    const renderHeads = (isOptimizeMode: boolean, renderColumnList: VxeTableDefines.ColumnInfo[]) => {
       const { fixedType, footerTableData } = props
       const { footerRowClassName, footerRowStyle } = tableProps
       const { isColLoading, isDragColMove } = tableReactData
@@ -244,7 +240,7 @@ export default defineComponent({
             ],
             style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
           }, {
-            default: () => renderRows(renderColumnList, footerTableData, row, $rowIndex, _rowIndex)
+            default: () => renderRows(isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex)
           })
         }
         return h('tr', {
@@ -254,7 +250,7 @@ export default defineComponent({
             footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
           ],
           style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
-        }, renderRows(renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
+        }, renderRows(isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
       })
     }
 
@@ -262,12 +258,12 @@ export default defineComponent({
       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
       let isOptimizeMode = false
       // 如果是使用优化模式
-      if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+      if (scrollXLoad && allColumnFooterOverflow) {
         if (spanMethod || footerSpanMethod) {
           // 如果不支持优化模式
         } else {
@@ -275,7 +271,7 @@ export default defineComponent({
         }
       }
 
-      if (!isColLoading && (fixedType || !overflowX)) {
+      if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
         renderColumnList = visibleColumn
       }
 
@@ -355,7 +351,7 @@ export default defineComponent({
          */
             h('tfoot', {
               ref: refFooterTFoot
-            }, renderHeads(renderColumnList))
+            }, renderHeads(isOptimizeMode, renderColumnList))
           ])
         ])
       ])

package/packages/table/src/header.ts

@@ -57,6 +57,7 @@ export default defineComponent({
       const headerCellOpts = computeHeaderCellOpts.value
       const currCellHeight = getCellHeight(headerCellOpts.height || cellOpts.height) || defaultRowHeight
       const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
+
       return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column
         const colid = column.id
@@ -68,10 +69,10 @@ export default defineComponent({
         const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding
         const headOverflow = XEUtils.eqNull(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) {
@@ -82,7 +83,20 @@ export default defineComponent({
         const _columnIndex = colRest._index
         const cellParams: VxeTableDefines.CellRenderHeaderParams & {
           $table: VxeTableConstructor & VxeTablePrivateMethods
-        } = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter }
+        } = {
+          $table: $xeTable,
+          $grid: $xeGrid,
+          $rowIndex,
+          column,
+          columnIndex,
+          $columnIndex,
+          _columnIndex,
+          firstFilterOption,
+          fixed: fixedType,
+          type: renderType,
+          isHidden: fixedHiddenColumn,
+          hasFilter
+        }
         const thAttrs: Record<string, string | number | null> = {
           colid,
           colspan: column.colSpan > 1 ? column.colSpan : null,
@@ -92,10 +106,6 @@ export default defineComponent({
           onClick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
           onDblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
         }
-        // 横向虚拟滚动不支持动态行高
-        if (scrollXLoad && !hasEllipsis) {
-          showEllipsis = hasEllipsis = true
-        }
         const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell'
         let isDisabledDrag = false
         if (isColDragCell) {
@@ -119,7 +129,7 @@ export default defineComponent({
         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
@@ -227,7 +237,7 @@ export default defineComponent({
     const renderVN = () => {
       const { fixedType, fixedColumn, tableColumn } = props
       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 = computeMouseOpts.value
@@ -239,7 +249,7 @@ export default defineComponent({
         renderColumnList = visibleColumn
       } else {
         // 如果是使用优化模式
-        if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+        if (scrollXLoad && allColumnHeaderOverflow) {
           if (spanMethod || footerSpanMethod) {
             // 如果不支持优化模式
           } else {
@@ -247,7 +257,7 @@ export default defineComponent({
           }
         }
 
-        if (!isColLoading && (fixedType || !overflowX)) {
+        if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
           renderColumnList = visibleColumn
         }
 

package/packages/table/src/table.ts

@@ -2075,7 +2075,7 @@ export default defineComponent({
 
     const updateStyle = () => {
       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 = refElem.value
       if (!el) {
@@ -2191,7 +2191,7 @@ export default defineComponent({
               renderColumnList = visibleColumn
             } else {
               // 如果是使用优化模式
-              if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+              if (scrollXLoad && allColumnHeaderOverflow) {
                 if (spanMethod || footerSpanMethod) {
                   // 如果不支持优化模式
                 } else {
@@ -2199,8 +2199,11 @@ export default defineComponent({
                 }
               }
 
-              if (fixedType) {
+              if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
                 renderColumnList = visibleColumn
+              }
+
+              if (fixedType) {
                 // 如果是使用优化模式
                 if (isOptimizeMode) {
                   renderColumnList = fixedColumn || []
@@ -2297,7 +2300,7 @@ export default defineComponent({
             let renderColumnList = tableColumn
             let isOptimizeMode = false
             // 如果是使用优化模式
-            if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+            if (scrollXLoad && allColumnFooterOverflow) {
               if (spanMethod || footerSpanMethod) {
                 // 如果不支持优化模式
               } else {

package/packages/ui/index.ts

@@ -219,8 +219,8 @@ VxeUI.setConfig({
       oSize: 0
     },
     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);