vxe-table 3.22.7 → 3.22.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.22.7",
+  "version": "3.22.9",
   "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",
@@ -65,7 +65,7 @@
     "vue-i18n": "^8.15.1",
     "vue-router": "^3.5.1",
     "vue-template-compiler": "2.6.14",
-    "vxe-pc-ui": "3.16.21"
+    "vxe-pc-ui": "3.16.22"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

package/packages/grid/src/grid.ts

@@ -1462,6 +1462,21 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return null
     },
+    getCustomPagerData () {
+      const $xeGrid = this
+      const props = $xeGrid
+      const reactData = $xeGrid.reactData
+
+      const { pagerConfig } = props
+      const { tablePage } = reactData
+      const pagerOpts = $xeGrid.computePagerOpts
+      if (pagerConfig && isEnableConf(pagerOpts)) {
+        return {
+          pSize: tablePage.pageSize
+        }
+      }
+      return {}
+    },
     loadColumn (columns: any[]) {
       const $xeGrid = this
       const slots = $xeGrid.$scopedSlots

package/packages/table/module/export/mixin.ts

@@ -1325,7 +1325,7 @@ function handleExportAndPrint ($xeTable: VxeTableConstructor, options: VxeTableP
     const isColGroup = column.children && column.children.length > 0
     let isChecked = false
     const isExtraChecked = extraFdMaps[column.field]
-    if (columns && columns.length) {
+    if (columns) {
       isChecked = handleFilterColumns(defOpts, column, columns)
     } else if (excludeFields || includeFields) {
       isChecked = handleFilterFields(defOpts, column, includeFields, includeFdMaps, excludeFdMaps, extraFdMaps)
@@ -1536,7 +1536,7 @@ export default {
 
       let isCustomCol = false
       let customCols = []
-      if (columns && columns.length) {
+      if (columns) {
         isCustomCol = true
         customCols = XEUtils.searchTree(columns, () => true, { children: 'children', mapChildren: 'childNodes', original: true })
       } else {
@@ -1544,7 +1544,7 @@ export default {
           const isColGroup = column.children && column.children.length > 0
           let isChecked = false
           const isExtraChecked = extraFdMaps[column.field]
-          if (columns && columns.length) {
+          if (columns) {
             isChecked = handleFilterColumns(opts, column, columns)
           } else if (excludeFields || includeFields) {
             isChecked = handleFilterFields(opts, column, includeFields, includeFdMaps, excludeFdMaps, extraFdMaps)

package/packages/table/src/cell.ts

@@ -190,8 +190,8 @@ function renderTitleContent (h: CreateElement, params: VxeTableDefines.CellRende
   const headerTooltipOpts = $table.computeHeaderTooltipOpts
   const showAllTip = headerTooltipOpts.showAll
   const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
-  const showTitle = headOverflow === 'title'
-  const showTooltip = headOverflow === true || headOverflow === 'tooltip'
+  const showTitle = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === 'title'
+  const showTooltip = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === 'tooltip'
   const ons: Record<string, any> = {}
   if (showTitle || showTooltip || showAllTip) {
     ons.mouseenter = (evnt: MouseEvent) => {

package/packages/table/src/footer.ts

@@ -47,9 +47,9 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
     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
-    const showEllipsis = footOverflow === 'ellipsis'
-    const showTitle = footOverflow === 'title'
-    const showTooltip = footOverflow === true ? footerTooltipOpts.mode === 'tooltip' : footOverflow === 'tooltip'
+    const showEllipsis = (footOverflow === true ? footerTooltipOpts.mode : footOverflow) === 'ellipsis'
+    const showTitle = (footOverflow === true ? footerTooltipOpts.mode : footOverflow) === 'title'
+    const showTooltip = (footOverflow === true ? footerTooltipOpts.mode : footOverflow) === 'tooltip'
     const hasEllipsis = showTitle || showTooltip || showEllipsis
     const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
     const attrs: any = { colid }

package/packages/table/src/header.ts

@@ -250,9 +250,9 @@ function renderFilterRows (h: CreateElement, _vm: any, isOptimizeMode: boolean,
     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
-    const showEllipsis = headOverflow === 'ellipsis'
-    const showTitle = headOverflow === 'title'
-    const showTooltip = headOverflow === true ? headerTooltipOpts.mode === 'tooltip' : headOverflow === 'tooltip'
+    const showEllipsis = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === 'ellipsis'
+    const showTitle = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === 'title'
+    const showTooltip = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === 'tooltip'
     const hasEllipsis = showTitle || showTooltip || showEllipsis
     let hasFilter = false
     let firstFilterOption: VxeTableDefines.FilterOption | null = null

package/packages/table/src/methods.ts

@@ -141,12 +141,15 @@ function handleCustomRestore ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
+  const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & VxeGridPrivateMethods
+  const $xeGantt = $xeTable.$xeGantt
+  const $xeGGWrapper = $xeGrid || $xeGantt
 
   const { aggregateConfig, rowGroupConfig } = props
   const { collectColumn } = internalData
-  const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc } = handleCustomStoreConfig($xeTable)
+  const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc, isCustomPager } = handleCustomStoreConfig($xeTable)
 
-  let { alignData, headerAlignData, footerAlignData, resizableData, sortData, visibleData, fixedData, aggGroupData, aggFuncData } = storeData
+  let { alignData, headerAlignData, footerAlignData, resizableData, sortData, visibleData, fixedData, aggGroupData, aggFuncData, pagerData } = storeData
   // 处理还原
   if ((isCustomAlign && alignData) ||
     (isCustomHeaderAlign && headerAlignData) ||
@@ -156,7 +159,8 @@ function handleCustomRestore ($xeTable: VxeTableConstructor & VxeTablePrivateMet
     (isCustomVisible && visibleData) ||
     (isCustomFixed && fixedData) ||
     (isCustomAggGroup && aggGroupData) ||
-    (isCustomAggFunc && aggFuncData)) {
+    (isCustomAggFunc && aggFuncData) ||
+    (isCustomPager && pagerData && $xeGGWrapper)) {
     const sortColMaps: Record<string, {
       key: string
       sNum: number
@@ -670,7 +674,7 @@ function updateAfterTreeIndex ($xeTable: VxeTableConstructor & VxeTablePrivateMe
   const fullMaps: Record<string, any> = {}
   let rowNum = 0
   const { handleGetRowId } = createHandleGetRowId($xeTable)
-  XEUtils.eachTree(afterTreeFullData, (row, index, items, path) => {
+  XEUtils.eachTree(afterTreeFullData, (row, index, items, path, parentRow) => {
     const rowid = handleGetRowId(row)
     const rowRest = fullAllDataRowIdData[rowid]
     const seq = path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('')
@@ -678,9 +682,10 @@ function updateAfterTreeIndex ($xeTable: VxeTableConstructor & VxeTablePrivateMe
       rowRest.seq = seq
       rowRest._seq = rowNum
       rowRest.treeIndex = index
+      rowRest._index = rowNum
       rowRest._tIndex = rowNum
     } else {
-      const rest = { row, rowid, _seq: rowNum, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, _tIndex: rowNum, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+      const rest = { row, rowid, _seq: rowNum, seq, index, $index: -1, _index: rowNum, treeIndex: index, _tIndex: rowNum, items, parent: parentRow, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
       fullAllDataRowIdData[rowid] = rest
       fullDataRowIdData[rowid] = rest
     }
@@ -4370,7 +4375,7 @@ function calcCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   const autoWidthColumnList = $xeTable.computeAutoWidthColumnList
   const { fullColumnIdData } = internalData
   const el = $xeTable.$refs.refElem as HTMLDivElement
-  if (el) {
+  if (el && autoWidthColumnList.length) {
     el.setAttribute('data-calc-col', 'Y')
     autoWidthColumnList.forEach(column => {
       const colid = column.id
@@ -4475,12 +4480,12 @@ function updateRowExpandStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMe
     return
   }
   const expandOpts = $xeTable.computeExpandOpts
-  const rowOpts = $xeTable.computeRowOpts
-  const cellOpts = $xeTable.computeCellOpts
-  const defaultRowHeight = $xeTable.computeDefaultRowHeight
   const { mode } = expandOpts
   if (expandColumn && mode === 'fixed') {
     const { elemStore, fullAllDataRowIdData } = internalData
+    const rowOpts = $xeTable.computeRowOpts
+    const cellOpts = $xeTable.computeCellOpts
+    const defaultRowHeight = $xeTable.computeDefaultRowHeight
     const rowExpandEl = $xeTable.$refs.refRowExpandElem as HTMLDivElement
     const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
     if (rowExpandEl && bodyScrollElem) {
@@ -6789,6 +6794,9 @@ const tableMethods: any = {
    */
   getCustomStoreData () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const $xeGrid = $xeTable.$xeGrid
+    const $xeGantt = $xeTable.$xeGantt
+    const $xeGGWrapper = $xeGrid || $xeGantt
     const props = $xeTable
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
@@ -6798,7 +6806,7 @@ const tableMethods: any = {
     const { isRowGroupStatus, rowGroupList } = reactData
     const { fullColumnFieldData, collectColumn } = internalData
     const { storage, checkMethod } = customOpts
-    const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc } = handleCustomStoreConfig($xeTable)
+    const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc, isCustomPager } = handleCustomStoreConfig($xeTable)
 
     const alignData: Record<string, VxeColumnPropTypes.Align> = {}
     const headerAlignData: Record<string, VxeColumnPropTypes.HeaderAlign> = {}
@@ -6811,6 +6819,7 @@ const tableMethods: any = {
     const aggFuncData: Record<string, VxeColumnPropTypes.AggFunc> = {}
 
     const storeData: VxeTableDefines.CustomStoreData = {
+      pagerData: isCustomPager && $xeGGWrapper && $xeGGWrapper.getCustomPagerData ? $xeGGWrapper.getCustomPagerData() : undefined,
       alignData: undefined,
       headerAlignData: undefined,
       footerAlignData: undefined,
@@ -6946,7 +6955,7 @@ const tableMethods: any = {
     const tableId = $xeTable.computeTableId
     const customOpts = $xeTable.computeCustomOpts
     const { updateStore, storage } = customOpts
-    const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc } = handleCustomStoreConfig($xeTable)
+    const { isCustomAlign, isCustomHeaderAlign, isCustomFooterAlign, isCustomResizable, isCustomVisible, isCustomFixed, isCustomSort, isCustomAggGroup, isCustomAggFunc, isCustomPager } = handleCustomStoreConfig($xeTable)
 
     if (type !== 'reset') {
       // fix：修复拖动列宽，重置按钮无法点击的问题
@@ -6963,7 +6972,8 @@ const tableMethods: any = {
         isCustomFixed ||
         isCustomSort ||
         isCustomAggGroup ||
-        isCustomAggFunc
+        isCustomAggFunc ||
+        isCustomPager
       )
     ) {
       if (!tableId) {
@@ -6972,6 +6982,7 @@ const tableMethods: any = {
       }
       const storeData: VxeTableDefines.CustomStoreData = type === 'reset'
         ? {
+            pagerData: {},
             alignData: {},
             headerAlignData: {},
             footerAlignData: {},
@@ -10247,6 +10258,7 @@ const tableMethods: any = {
       status: false
     }
     if (!(el && prevDragRow && dragRow)) {
+      handleRowDragEndClearStatus($xeTable)
       return Promise.resolve(errRest)
     }
     // 判断是否有拖动
@@ -10355,6 +10367,9 @@ const tableMethods: any = {
       }
 
       const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild
+      if (dEndMethod) {
+        handleRowDragEndClearStatus($xeTable)
+      }
       return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
         if (!status) {
           return errRest
@@ -10675,6 +10690,9 @@ const tableMethods: any = {
         const errRest = {
           status: false
         }
+        if (dragEndMethod) {
+          handleRowDragEndClearStatus($xeTable)
+        }
         Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
           if (!status) {
             if ($oldTable) {

package/packages/table/src/table.ts

@@ -1767,9 +1767,9 @@ export default {
     // if (treeConfig && (treeOpts.showLine || treeOpts.line) && !showOverflow) {
     //   warnLog('vxe.error.reqProp', ['show-overflow'])
     // }
-    if (treeConfig && !treeOpts.transform && props.stripe) {
-      warnLog('vxe.error.noTree', ['stripe'])
-    }
+    // if (treeConfig && !treeOpts.transform && props.stripe) {
+    //   warnLog('vxe.error.noTree', ['stripe'])
+    // }
     if (treeConfig && !treeOpts.transform) {
       if (sortOpts.isDeep) {
         warnLog('vxe.error.reqSupportProp', ['transform=false', 'sort-config.isDeep=false'])

package/packages/table/src/util.ts

@@ -165,6 +165,8 @@ export function createInternalData (): TableInternalData {
     initStatus: false,
     isActivated: false,
 
+    // rceTimeout: undefined,
+    // rceRunTime: undefined,
     rceDelay: 0
 
     // _sToTime: null
@@ -1123,6 +1125,7 @@ export function handleCustomStoreConfig ($xeTable: VxeTableConstructor) {
   const isCustomSort = hangleBolleanDefaultValue(storageOpts.sort, isAllCustom)
   const isCustomAggGroup = hangleBolleanDefaultValue(storageOpts.aggGroup, isAllCustom)
   const isCustomAggFunc = hangleBolleanDefaultValue(storageOpts.aggFunc, isAllCustom)
+  const isCustomPager = hangleBolleanDefaultValue(storageOpts.pager, isAllCustom)
   return {
     isCustomAlign,
     isCustomHeaderAlign,
@@ -1132,6 +1135,7 @@ export function handleCustomStoreConfig ($xeTable: VxeTableConstructor) {
     isCustomFixed,
     isCustomSort,
     isCustomAggGroup,
-    isCustomAggFunc
+    isCustomAggFunc,
+    isCustomPager
   }
 }

package/packages/ui/index.ts

@@ -78,9 +78,11 @@ VxeUI.setConfig({
       defaultPlacement: 'top'
     },
     headerTooltipConfig: {
+      mode: 'tooltip',
       enterable: true
     },
     footerTooltipConfig: {
+      mode: 'tooltip',
       enterable: true
     },
     validConfig: {

package/styles/components/table.scss

@@ -4,6 +4,27 @@
 @use './icon.scss';
 @use './table-module/all.scss';
 
+
+// 局部变量
+.vxe-table {
+  --vxe-ui-table-current-font-size: var(--vxe-ui-font-size-default);
+  &.size--xlarge {
+    --vxe-ui-table-current-font-size: var(--vxe-ui-font-size-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-table-current-font-size: var(--vxe-ui-font-size-large);
+  }
+  &.size--medium {
+    --vxe-ui-table-current-font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    --vxe-ui-table-current-font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    --vxe-ui-table-current-font-size: var(--vxe-ui-font-size-mini);
+  }
+}
+
 $btnThemeList: (
   (
     name: "primary",
@@ -1374,7 +1395,7 @@ $btnThemeList: (
 /*table*/
 .vxe-table--render-default {
   position: relative;
-  font-size: var(--vxe-ui-font-size-default);
+  font-size: var(--vxe-ui-table-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   direction: ltr;
@@ -1832,7 +1853,6 @@ $btnThemeList: (
   }
   
   &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
     .vxe-table--empty-placeholder,
     .vxe-table--empty-block {
       min-height: var(--vxe-ui-table-row-height-medium);
@@ -1866,7 +1886,6 @@ $btnThemeList: (
     }
   }
   &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
     .vxe-table--empty-placeholder,
     .vxe-table--empty-block {
       min-height: var(--vxe-ui-table-row-height-small);
@@ -1900,7 +1919,6 @@ $btnThemeList: (
     }
   }
   &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
     .vxe-table--empty-placeholder,
     .vxe-table--empty-block {
       min-height: var(--vxe-ui-table-row-height-mini);
@@ -2447,7 +2465,7 @@ $btnThemeList: (
       width: 100%;
       position: absolute;
       left: 50%;
-      font-size: var(--vxe-ui-table-validate-error-font-size);
+      font-size: var(--vxe-ui-table-validate-error-font-size, var(--vxe-ui-table-current-font-size));
       line-height: 1em;
       transform: translate(-50%, -2px);
       text-align: left;
@@ -2473,7 +2491,7 @@ $btnThemeList: (
       // }
     }
     .vxe-cell--valid-error-theme-beautify {
-      padding: 0.2em 0.6em 0.25em 0.6em;
+      padding: var(--vxe-ui-table-validate-error-padding, 0.2em 0.6em);
       color: #fff;
       background-color: var(--vxe-ui-table-validate-error-color);
       .vxe-cell--valid-error-msg {

package/styles/theme/base.scss

@@ -91,7 +91,6 @@
   --vxe-ui-table-view-scrollbar-width: 18px;
   --vxe-ui-table-view-scrollbar-height: 18px;
 
-  --vxe-ui-table-validate-error-font-size: 12px;
   --vxe-ui-table-validate-error-color: #f56c6c;
   --vxe-ui-table-validate-error-cell-background-color: rgba(245, 108,108, 0.1);
   --vxe-ui-table-validate-error-theme-normal-background-color: var(--vxe-ui-layout-background-color);