vxe-table 3.21.11 → 3.21.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.21.11",
+  "version": "3.21.13",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -68,7 +68,7 @@
     "vue-i18n": "^8.15.1",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "2.6.14",
-    "vxe-pc-ui": "3.14.34"
+    "vxe-pc-ui": "3.14.35"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

package/packages/table/module/menu/panel.ts

@@ -48,8 +48,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { ctxMenuStore } = tableReactData
       const menuOpts = $xeTable.computeMenuOpts
-      const { destroyOnClose } = menuOpts
-      const { visible, list, className } = ctxMenuStore
+      const { destroyOnClose, className } = menuOpts
+      const { visible, list } = ctxMenuStore
       return h('div', {
         ref: 'refElem',
         class: ['vxe-table--context-menu-wrapper', className, {
@@ -61,7 +61,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           return options.every((item) => item.visible === false)
             ? renderEmptyElement($xeTable)
             : h('ul', {
-              class: 'vxe-context-menu--option-wrapper',
+              class: 'vxe-table--context-menu-group-wrapper',
               key: gIndex
             }, options.map((item, index) => {
               const { children, loading } = item
@@ -74,7 +74,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
               return item.visible === false
                 ? renderEmptyElement($xeTable)
                 : h('li', {
-                  class: [item.className, {
+                  class: ['vxe-table--context-menu--option', item.className, {
                     'link--loading': loading,
                     'link--disabled': item.disabled,
                     'link--active': item === ctxMenuStore.selected
@@ -128,12 +128,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
                       suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
                     ])
                   ]),
-                  hasChildMenus && item.children
+                  hasChildMenus && children
                     ? h('ul', {
                       class: ['vxe-table--context-menu-clild-wrapper', {
                         'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
                       }]
-                    }, item.children.map((child, cIndex) => {
+                    }, children.map((child, cIndex) => {
                       const { loading: childLoading } = child
                       const childPrefixOpts = Object.assign({}, child.prefixConfig)
                       const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon
@@ -143,7 +143,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                       return child.visible === false
                         ? null
                         : h('li', {
-                          class: [child.className, {
+                          class: ['vxe-table--context-menu--option', child.className, {
                             'link--loading': childLoading,
                             'link--disabled': child.disabled,
                             'link--active': child === ctxMenuStore.selectChild

package/packages/table/src/cell.ts

@@ -981,22 +981,26 @@ export const Cell = {
     }
     return renderCellBaseVNs(h, params, [
       showIcon && (!visibleMethod || visibleMethod(params))
-        ? h('span', {
+        ? h('div', {
           class: ['vxe-table--expanded', {
             'is--active': isActive
-          }],
-          on: {
-            mousedown (evnt: MouseEvent) {
-              evnt.stopPropagation()
-            },
-            click (evnt: MouseEvent) {
-              $table.triggerRowExpandEvent(evnt, params)
-            }
-          }
+          }]
         }, [
-          h('i', {
-            class: ['vxe-table--expand-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isActive ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))]
-          })
+          h('span', {
+            class: 'vxe-table--expand-btn',
+            on: {
+              mousedown (evnt: MouseEvent) {
+                evnt.stopPropagation()
+              },
+              click (evnt: MouseEvent) {
+                $table.triggerRowExpandEvent(evnt, params)
+              }
+            }
+          }, [
+            h('i', {
+              class: isLazyLoading ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isActive ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))
+            })
+          ])
         ])
         : renderEmptyElement($table),
       defaultSlot || labelField

package/packages/table/src/columnInfo.ts

@@ -2,53 +2,56 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { toFilters } from './util'
 import { isEnableConf, getFuncText } from '../../ui/src/utils'
+import { isPx } from '../../ui/src/dom'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines } from '../../../types'
+import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, VxeColumnProps } from '../../../types'
 
 const { getI18n, formats, renderer } = VxeUI
 
 export class ColumnInfo {
   /* eslint-disable @typescript-eslint/no-use-before-define */
-  constructor ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, _vm: any, { renderHeader, renderCell, renderFooter, renderData }: any = {}) {
+  constructor ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, colConfs: VxeColumnProps & { renderHeader?: any, renderCell?: any, renderFooter?: any, slots?: any }, { renderHeader, renderCell, renderFooter, renderData }: any = {}) {
     const tableProps = $xeTable
     const $xeGrid = $xeTable.$xeGrid
     const $xeGantt = $xeTable.$xeGantt
     const $xeGGWrapper = $xeGrid || $xeGantt
 
-    const { field, editRender, filterRender } = _vm
+    const { type, field, width, visible, aggFunc, formatter, filterMultiple, cellRender, editRender, filterRender } = colConfs
 
-    const colId = _vm.colId || XEUtils.uniqueId('col_')
+    const colId = colConfs.colId || XEUtils.uniqueId('col_')
 
     const proxyOpts = $xeGrid ? $xeGrid.computeProxyOpts : null
-    const formatter = _vm.formatter
-    const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true
+    const defaultVisible = XEUtils.isBoolean(visible) ? visible : true
+    const defaultRenderWidth = width && isPx(width) && width !== 'auto' ? Math.max(0, XEUtils.toInteger(width)) : 0
 
-    const flCompConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+    const flCompConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
     const ctFilterOptions = flCompConf ? flCompConf.createTableFilterOptions : null
 
-    const filters = toFilters(_vm.filters, colId)
+    const filters = toFilters(colConfs.filters, colId)
 
     const types = ['seq', 'checkbox', 'radio', 'expand', 'html']
-    if (_vm.type && types.indexOf(_vm.type) === -1) {
-      warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')])
+    if (type && types.indexOf(type) === -1) {
+      warnLog('vxe.error.errProp', [`type=${type}`, types.join(', ')])
     }
-    if (XEUtils.isBoolean(_vm.cellRender) || (_vm.cellRender && !XEUtils.isObject(_vm.cellRender))) {
-      warnLog('vxe.error.errProp', [`column.cell-render=${_vm.cellRender}`, 'column.cell-render={}'])
+    if (XEUtils.isBoolean(cellRender) || (cellRender && !XEUtils.isObject(cellRender))) {
+      warnLog('vxe.error.errProp', [`column.cell-render=${cellRender}`, 'column.cell-render={}'])
     }
-    if (XEUtils.isBoolean(_vm.editRender) || (_vm.editRender && !XEUtils.isObject(_vm.editRender))) {
-      warnLog('vxe.error.errProp', [`column.edit-render=${_vm.editRender}`, 'column.edit-render={}'])
+    if (XEUtils.isBoolean(editRender) || (editRender && !XEUtils.isObject(editRender))) {
+      warnLog('vxe.error.errProp', [`column.edit-render=${editRender}`, 'column.edit-render={}'])
     }
-    if (_vm.type === 'expand') {
+    if (type === 'expand') {
       const { treeConfig } = tableProps
       if (treeConfig && ($xeTable.treeOpts.showLine || $xeTable.treeOpts.line)) {
         errLog('vxe.error.errConflicts', ['tree-config.line', 'column.type=expand'])
       }
     }
-    if (_vm.remoteSort) {
+    // 参数已废弃
+    if ((colConfs as any).remoteSort) {
       warnLog('vxe.error.delProp', ['column.remote-sort', 'sort-config.remote'])
     }
-    if (_vm.sortMethod) {
+    // 参数已废弃
+    if ((colConfs as any).sortMethod) {
       warnLog('vxe.error.delProp', ['column.sort-method', 'sort-config.sortMethod'])
     }
     if (formatter) {
@@ -64,9 +67,9 @@ export class ColumnInfo {
         }
       }
     }
-    if (_vm.aggFunc) {
-      if (!$xeTable.handlePivotTableAggData && _vm.aggFunc !== true) {
-        errLog('vxe.error.errProp', [`column.agg-func=${_vm.aggFunc}`, 'column.agg-func=true'])
+    if (aggFunc) {
+      if (!$xeTable.handlePivotTableAggData && aggFunc !== true) {
+        errLog('vxe.error.errProp', [`column.agg-func=${aggFunc}`, 'column.agg-func=true'])
       }
     }
 
@@ -81,76 +84,79 @@ export class ColumnInfo {
 
     Object.assign(this, {
       // 基本属性
-      type: _vm.type,
-      property: _vm.field,
+      type: colConfs.type,
+      property: colConfs.field,
       field: field,
-      title: _vm.title,
-      width: _vm.width,
-      minWidth: _vm.minWidth,
-      maxWidth: _vm.maxWidth,
-      resizable: _vm.resizable,
-      fixed: _vm.fixed,
-      align: _vm.align,
-      headerAlign: _vm.headerAlign,
-      footerAlign: _vm.footerAlign,
-      showOverflow: _vm.showOverflow,
-      showHeaderOverflow: _vm.showHeaderOverflow,
-      showFooterOverflow: _vm.showFooterOverflow,
-      className: _vm.className,
-      headerClassName: _vm.headerClassName,
-      footerClassName: _vm.footerClassName,
+      title: colConfs.title,
+      width: colConfs.width,
+      minWidth: colConfs.minWidth,
+      maxWidth: colConfs.maxWidth,
+      resizable: colConfs.resizable,
+      fixed: colConfs.fixed,
+      align: colConfs.align,
+      headerAlign: colConfs.headerAlign,
+      footerAlign: colConfs.footerAlign,
+      showOverflow: colConfs.showOverflow,
+      showHeaderOverflow: colConfs.showHeaderOverflow,
+      showFooterOverflow: colConfs.showFooterOverflow,
+      className: colConfs.className,
+      headerClassName: colConfs.headerClassName,
+      footerClassName: colConfs.footerClassName,
       formatter,
-      headerFormatter: _vm.headerFormatter,
-      footerFormatter: _vm.footerFormatter,
-      padding: _vm.padding,
-      verticalAlign: _vm.verticalAlign,
-      sortable: _vm.sortable,
-      sortBy: _vm.sortBy,
-      sortType: _vm.sortType,
-      sortMethod: _vm.sortMethod,
-      remoteSort: _vm.remoteSort,
+      headerFormatter: colConfs.headerFormatter,
+      footerFormatter: colConfs.footerFormatter,
+      padding: colConfs.padding,
+      verticalAlign: colConfs.verticalAlign,
+      sortable: colConfs.sortable,
+      sortBy: colConfs.sortBy,
+      sortType: colConfs.sortType,
+
+      // 参数已废弃
+      sortMethod: (colConfs as any).sortMethod,
+      // 参数已废弃
+      remoteSort: (colConfs as any).remoteSort,
+
       filters: filters,
-      filterMultiple: XEUtils.isBoolean(_vm.filterMultiple) ? _vm.filterMultiple : true,
-      filterMethod: _vm.filterMethod,
-      filterResetMethod: _vm.filterResetMethod,
-      filterRecoverMethod: _vm.filterRecoverMethod,
+      filterMultiple: XEUtils.isBoolean(filterMultiple) ? filterMultiple : true,
+      filterMethod: colConfs.filterMethod,
+      filterResetMethod: colConfs.filterResetMethod,
+      filterRecoverMethod: colConfs.filterRecoverMethod,
       filterRender: filterRender,
-      floatingFilters: _vm.floatingFilters,
-      rules: _vm.rules,
-      rowGroupNode: _vm.rowGroupNode,
-      treeNode: _vm.treeNode,
-      dragSort: _vm.dragSort,
-      rowResize: _vm.rowResize,
-      cellType: _vm.cellType,
-      cellRender: _vm.cellRender,
+      floatingFilters: colConfs.floatingFilters,
+      rules: colConfs.rules,
+      rowGroupNode: colConfs.rowGroupNode,
+      treeNode: colConfs.treeNode,
+      dragSort: colConfs.dragSort,
+      rowResize: colConfs.rowResize,
+      cellType: colConfs.cellType,
+      cellRender: colConfs.cellRender,
       editRender: editRender,
-      contentRender: _vm.contentRender,
-      headerExportMethod: _vm.headerExportMethod,
-      exportMethod: _vm.exportMethod,
-      footerExportMethod: _vm.footerExportMethod,
-      titleHelp: _vm.titleHelp,
-      titlePrefix: _vm.titlePrefix,
-      titleSuffix: _vm.titleSuffix,
-
-      aggFunc: _vm.aggFunc,
-      copyMethod: _vm.copyMethod,
-      cutMethod: _vm.cutMethod,
-      pasteMethod: _vm.pasteMethod,
+      contentRender: colConfs.contentRender,
+      headerExportMethod: colConfs.headerExportMethod,
+      exportMethod: colConfs.exportMethod,
+      footerExportMethod: colConfs.footerExportMethod,
+      titleHelp: colConfs.titleHelp,
+      titlePrefix: colConfs.titlePrefix,
+      titleSuffix: colConfs.titleSuffix,
+
+      aggFunc: colConfs.aggFunc,
+      copyMethod: colConfs.copyMethod,
+      cutMethod: colConfs.cutMethod,
+      pasteMethod: colConfs.pasteMethod,
 
       // 自定义参数
-      params: _vm.params,
+      params: colConfs.params,
       // 渲染属性
       id: colId,
       parentId: null,
-      visible,
+      visible: defaultVisible,
       // 内部属性（一旦被使用，将导致不可升级版本）
       defaultParentId: null,
       halfVisible: false,
-      defaultVisible: visible,
-      defaultFixed: _vm.fixed,
+      defaultVisible: defaultVisible,
+      defaultFixed: colConfs.fixed,
 
-      defaultAggGroup: _vm.aggGroup,
-      defaultAggFunc: _vm.aggFunc,
+      defaultAggFunc: colConfs.aggFunc,
 
       checked: false,
       halfChecked: false,
@@ -177,7 +183,7 @@ export class ColumnInfo {
       renderFixed: '',
       renderVisible: false,
 
-      renderWidth: 0,
+      renderWidth: defaultRenderWidth,
       renderHeight: 0,
       renderResizeWidth: 0,
       renderAutoWidth: 0,
@@ -186,19 +192,19 @@ export class ColumnInfo {
       renderLeft: 0,
       renderArgs: [], // 渲染参数可用于扩展
       model: {},
-      renderHeader: renderHeader || _vm.renderHeader,
-      renderCell: renderCell || _vm.renderCell,
-      renderFooter: renderFooter || _vm.renderFooter,
+      renderHeader: renderHeader || colConfs.renderHeader,
+      renderCell: renderCell || colConfs.renderCell,
+      renderFooter: renderFooter || colConfs.renderFooter,
       renderData,
       // 单元格插槽，只对 grid 有效
-      slots: _vm.slots
+      slots: colConfs.slots
     })
     if (ctFilterOptions && (!filters || !filters.length)) {
       (this as any).filters = toFilters(ctFilterOptions({ $table: $xeTable, column: this as unknown as VxeTableDefines.ColumnInfo }), colId)
     }
     if ($xeGGWrapper) {
       if (proxyOpts && proxyOpts.beforeColumn) {
-        proxyOpts.beforeColumn({ $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, column: this })
+        proxyOpts.beforeColumn({ $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, column: this as unknown as VxeTableDefines.ColumnInfo })
       }
     }
   }
@@ -208,8 +214,8 @@ export class ColumnInfo {
   }
 
   getKey (this: any) {
-    const { type } = this
-    return this.field || (type ? `type=${type}` : null)
+    const { type, field } = this
+    return field || (type ? `type=${type}` : null)
   }
 
   update (this: any, name: any, value: any) {

package/packages/table/src/methods.ts

@@ -453,7 +453,11 @@ function updateScrollYStatus ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   const { transform } = treeOpts
   const allList = fullData || internalData.tableFullData
   // 如果gt为0，则总是启用
-  const scrollYLoad = (transform || !treeConfig) && !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt < allList.length)
+  let scrollYLoad = !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt < allList.length)
+  if (scrollYLoad && (treeConfig && !transform)) {
+    errLog('vxe.error.notSupportProp', ['[table] virtual-y-config.enabled=true', 'tree-config.transform=false', 'tree-config.transform=true'])
+    scrollYLoad = false
+  }
   reactData.scrollYLoad = scrollYLoad
   syncGanttScrollYStatus($xeTable)
   return scrollYLoad
@@ -5160,7 +5164,7 @@ const tableMethods: any = {
       const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
       XEUtils.eachTree(tableFullTreeData, (row, index, items, path, parentRow, nodes) => {
         const rowid = handleUpdateRowId(row)
-        if (treeConfig && lazy) {
+        if (lazy) {
           if (row[hasChildField] && row[childrenField] === undefined) {
             row[childrenField] = null
           }

package/packages/table/src/table.ts

@@ -1863,7 +1863,7 @@ export default {
       warnLog('vxe.error.delProp', ['table.edit-config.activeMethod', 'table.edit-config.beforeEditMethod'])
     }
     if (props.treeConfig && checkboxOpts.isShiftKey) {
-      errLog('vxe.error.errConflicts', ['tree-config', 'checkbox-config.isShiftKey'])
+      errLog('vxe.error.reqSupportProp', ['tree-config', 'checkbox-config.isShiftKey=false'])
     }
     if (checkboxOpts.halfField) {
       warnLog('vxe.error.delProp', ['checkbox-config.halfField', 'checkbox-config.indeterminateField'])

package/packages/table/src/util.ts

@@ -785,7 +785,7 @@ export function getRootColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMe
   return column
 }
 
-export function toFilters (filters: any, colid?: string) {
+export function toFilters (filters: any, colid?: string | number) {
   if (filters) {
     if (XEUtils.isArray(filters)) {
       return filters.map(({ label, value, data, resetValue, checked }) => {

package/styles/components/table-module/menu.scss

@@ -18,13 +18,16 @@
   font-family: var(--vxe-ui-font-family);
   background-color: var(--vxe-ui-layout-background-color);
 }
+.vxe-context-menu--option {
+  color: var(--vxe-ui-font-color);
+}
 .vxe-context-menu--link {
   display: flex;
   flex-direction: row;
   width: var(--vxe-ui-table-menu-item-width);
   line-height: 26px;
   padding: 0 0.8em;
-  color: var(--vxe-ui-font-color);
+  color: inherit;
   cursor: pointer;
   .vxe-context-menu--link-prefix,
   .vxe-context-menu--link-suffix {
@@ -41,7 +44,7 @@
     white-space: nowrap;
   }
 }
-.vxe-context-menu--option-wrapper,
+.vxe-table--context-menu-group-wrapper,
 .vxe-table--context-menu-clild-wrapper {
   margin: 0;
   padding: 0;

package/styles/components/table.scss

@@ -2204,6 +2204,16 @@ $btnThemeList: (
   }
 
   /*展开行*/
+  .vxe-body--column {
+    &.col--expand {
+      & > .vxe-cell {
+        .vxe-cell--wrapper {
+          display: flex;
+          flex-direction: row;
+        }
+      }
+    }
+  }
   .vxe-table--row-expanded-wrapper {
     position: absolute;
     top: 0;
@@ -2237,20 +2247,28 @@ $btnThemeList: (
     border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
   }
   .vxe-table--expanded {
-    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
     .vxe-table--expand-btn {
-      display: inline-block;
-      width: 1em;
-      height: 1em;
-      text-align: center;
+      cursor: pointer;
       user-select: none;
       color: var(--vxe-ui-font-lighten-color);
-      @include baseMixin.createAnimationTransition(transform);
       &:hover {
         color: var(--vxe-ui-font-color);
       }
+      i {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        @include baseMixin.createAnimationTransition(transform);
+      }
     }
     &+.vxe-table--expand-label {
+      flex-grow: 1;
       padding-left: 0.5em;
     }
   }