vxe-table 3.9.21 → 3.10.0-beta.0

package/packages/table/src/props.ts

@@ -7,31 +7,31 @@ const { getConfig } = VxeUI
 
 export default {
   /** 基本属性 */
-  id: [String, Function],
+  id: [String, Function] as PropType<VxeTablePropTypes.ID>,
   // 数据
-  data: Array,
+  data: Array as PropType<any[]>,
   // 表格的高度
-  height: [Number, String],
+  height: [Number, String] as PropType<VxeTablePropTypes.Height>,
   // 表格的最小高度
   minHeight: {
-    type: [Number, String],
+    type: [Number, String] as PropType<VxeTablePropTypes.MinHeight>,
     default: () => getConfig().table.minHeight
   },
   // 表格的最大高度
-  maxHeight: [Number, String],
+  maxHeight: [Number, String] as PropType<VxeTablePropTypes.MaxHeight>,
   // 已废弃，被 column-config.resizable 替换
   resizable: {
-    type: Boolean,
+    type: Boolean as PropType<VxeTablePropTypes.Resizable>,
     default: () => getConfig().table.resizable
   },
   // 是否带有斑马纹
   stripe: {
-    type: Boolean,
+    type: Boolean as PropType<VxeTablePropTypes.Stripe>,
     default: () => getConfig().table.stripe
   },
   // 是否带有边框
   border: {
-    type: [Boolean, String],
+    type: [Boolean, String] as PropType<VxeTablePropTypes.Border>,
     default: () => getConfig().table.border
   },
   // 单元格是否有边距

package/packages/table/src/table.ts

@@ -25,7 +25,7 @@ import customMixin from '../module/custom/mixin'
 
 import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
 
-const { getConfig, getI18n, renderer, globalResize, globalEvents, globalMixins } = VxeUI
+const { getConfig, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
 
 /**
  * 渲染浮固定列
@@ -80,7 +80,7 @@ function renderFixed (h: CreateElement, $xetable: any, fixedType: any) {
   ])
 }
 
-function renderEmptyContenet (h: CreateElement, _vm: any) {
+function renderEmptyBody (h: CreateElement, _vm: any) {
   const { $scopedSlots, emptyOpts } = _vm
   let emptyContent: any = ''
   const params = { $table: _vm }
@@ -630,6 +630,16 @@ export default {
       }
       return false
     },
+    computeVirtualScrollBars () {
+      const $xeTable = this
+      const reactData = $xeTable
+
+      const { overflowX, scrollXLoad, overflowY, scrollYLoad } = reactData
+      return {
+        x: overflowX && scrollXLoad,
+        y: overflowY && scrollYLoad
+      }
+    },
     tabsResizeFlag () {
       const $xeTable = this
       const $xeTabs = $xeTable.$xeTabs
@@ -1024,6 +1034,8 @@ export default {
     const VxeUILoadingComponent = VxeUI.getComponent<VxeLoadingComponent>('VxeLoading')
     const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
 
+    const $xeTable = this
+
     const {
       _e,
       $scopedSlots,
@@ -1067,10 +1079,11 @@ export default {
       checkboxOpts,
       loadingOpts,
       editRules
-    } = this
+    } = $xeTable
     const { leftList, rightList } = columnStore
     const currLoading = this._isLoading || loading
     const vSize = computeSize
+    const virtualScrollBars = $xeTable.computeVirtualScrollBars
     return h('div', {
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
@@ -1115,6 +1128,7 @@ export default {
         ref: 'hideColumn'
       }, this.$slots.default),
       h('div', {
+        key: 'tw',
         class: 'vxe-table--render-wrapper'
       }, [
         h('div', {
@@ -1162,37 +1176,74 @@ export default {
         h('div', {
           class: 'vxe-table--fixed-wrapper'
         }, [
-          /**
-           * 左侧固定区域
-           */
           leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : _e(),
-          /**
-           * 右侧固定区域
-           */
           rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : _e()
         ])
       ]),
+      virtualScrollBars.x
+        ? h('div', {
+          key: 'vx',
+          ref: 'refScrollXVirtualElem',
+          class: 'vxe-table--scroll-x-virtual'
+        }, [
+          h('div', {
+            ref: 'refScrollXHandleElem',
+            class: 'vxe-table--scroll-x-handle',
+            on: {
+              scroll: $xeTable.scrollXEvent
+            }
+          }, [
+            h('div', {
+              ref: 'refScrollXSpaceElem',
+              class: 'vxe-table--scroll-x-space'
+            })
+          ])
+        ])
+        : renderEmptyElement($xeTable),
+      virtualScrollBars.y
+        ? h('div', {
+          key: 'vy',
+          ref: 'refScrollYVirtualElem',
+          class: 'vxe-table--scroll-y-virtual'
+        }, [
+          h('div', {
+            ref: 'refScrollYHandleElem',
+            class: 'vxe-table--scroll-y-handle',
+            on: {
+              scroll: $xeTable.scrollYEvent
+            }
+          }, [
+            h('div', {
+              ref: 'refScrollYSpaceElem',
+              class: 'vxe-table--scroll-x-space'
+            })
+          ])
+        ])
+        : renderEmptyElement($xeTable),
       /**
        * 空数据
        */
       h('div', {
+        key: 'tn',
         ref: 'emptyPlaceholder',
         class: 'vxe-table--empty-placeholder'
       }, [
         h('div', {
           class: 'vxe-table--empty-content'
-        }, renderEmptyContenet(h, this))
+        }, renderEmptyBody(h, this))
       ]),
       /**
        * 边框线
        */
       h('div', {
+        key: 'tl',
         class: 'vxe-table--border-line'
       }),
       /**
        * 列宽线
        */
       h('div', {
+        key: 'cl',
         class: 'vxe-table--resizable-bar',
         style: overflowX
           ? {
@@ -1206,6 +1257,7 @@ export default {
        */
       VxeUILoadingComponent
         ? h(VxeUILoadingComponent, {
+          key: 'lg',
           class: 'vxe-table--loading',
           props: {
             value: currLoading,
@@ -1219,6 +1271,7 @@ export default {
        */
       initStore.custom
         ? h(TableCustomPanelComponent, {
+          key: 'cs',
           ref: 'customWrapper',
           props: {
             customStore
@@ -1230,6 +1283,7 @@ export default {
        */
       initStore.filter
         ? h(TableFilterPanelComponent, {
+          key: 'tf',
           ref: 'filterWrapper',
           props: {
             filterStore
@@ -1241,6 +1295,7 @@ export default {
        */
       initStore.import && this.importConfig
         ? h(TableImportPanelComponent, {
+          key: 'it',
           props: {
             defaultOptions: this.importParams,
             storeData: this.importStore
@@ -1252,6 +1307,7 @@ export default {
        */
       initStore.export && (this.exportConfig || this.printConfig)
         ? h(TableExportPanelComponent, {
+          key: 'et',
           props: {
             defaultOptions: this.exportParams,
             storeData: this.exportStore
@@ -1263,6 +1319,7 @@ export default {
        */
       ctxMenuStore.visible && this.isCtxMenu
         ? h(TableMenuPanelComponent, {
+          key: 'tm',
           ref: 'ctxWrapper',
           props: {
             ctxMenuStore,
@@ -1276,6 +1333,7 @@ export default {
          */
         VxeUITooltipComponent
           ? h(VxeUITooltipComponent, {
+            key: 'ctp',
             ref: 'commTip',
             props: {
               isArrow: false,
@@ -1288,6 +1346,7 @@ export default {
          */
         VxeUITooltipComponent
           ? h(VxeUITooltipComponent, {
+            key: 'btp',
             ref: 'tooltip',
             props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts)
           })
@@ -1297,6 +1356,7 @@ export default {
          */
         VxeUITooltipComponent && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
           ? h(VxeUITooltipComponent, {
+            key: 'vtp',
             ref: 'validTip',
             class: [{
               'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'

package/packages/table/src/util.ts

@@ -3,6 +3,8 @@ import { ColumnInfo } from './columnInfo'
 import { isScale, isPx } from '../../ui/src/dom'
 import { warnLog, errLog } from '../../ui/src/log'
 
+import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
+
 const getAllConvertColumns = (columns: any, parentColumn?: any) => {
   const result: any[] = []
   columns.forEach((column: any) => {
@@ -88,18 +90,6 @@ export function toTreePathSeq (path: any) {
   return path.map((num: any, i: any) => i % 2 === 0 ? (Number(num) + 1) : '.').join('')
 }
 
-export function removeScrollListener (scrollElem: any) {
-  if (scrollElem && scrollElem._onscroll) {
-    scrollElem.onscroll = null
-  }
-}
-
-export function restoreScrollListener (scrollElem: any) {
-  if (scrollElem && scrollElem._onscroll) {
-    scrollElem.onscroll = scrollElem._onscroll
-  }
-}
-
 /**
  * 生成行的唯一主键
  */
@@ -346,28 +336,60 @@ export function createColumn ($xeTable: any, options: any, renderOptions: any):
   return isColumnInfo(options) ? options : new ColumnInfo($xeTable, options, renderOptions)
 }
 
-export function rowToVisible ($xetable: any, row: any) {
-  const { tableBody } = $xetable.$refs
-  const bodyElem = tableBody ? tableBody.$el : null
+export function rowToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, row: any) {
+  const { reactData, internalData } = $xeTable
+  const tableProps = $xeTable
+  const { showOverflow } = tableProps
+  const tableBody: any = $xeTable.$refs.tableBody
+  const { columnStore, scrollYLoad } = reactData
+  const { afterFullData, scrollYStore, fullAllDataRowIdData } = internalData
+  const { leftList, rightList } = columnStore
+  const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+  const rowid = getRowid($xeTable, row)
+  let offsetFixedLeft = 0
+  leftList.forEach(item => {
+    offsetFixedLeft += item.renderWidth
+  })
+  let offsetFixedRight = 0
+  rightList.forEach(item => {
+    offsetFixedRight += item.renderWidth
+  })
   if (bodyElem) {
-    const trElem = bodyElem.querySelector(`[rowid="${getRowid($xetable, row)}"]`)
+    const bodyHeight = bodyElem.clientHeight
+    const bodyScrollTop = bodyElem.scrollTop
+    const trElem: HTMLTableRowElement | null = bodyElem.querySelector(`[rowid="${rowid}"]`)
     if (trElem) {
-      const bodyHeight = bodyElem.clientHeight
-      const bodySrcollTop = bodyElem.scrollTop
-      const trOffsetTop = trElem.offsetTop + (trElem.offsetParent ? trElem.offsetParent.offsetTop : 0)
+      const trOffsetParent = trElem.offsetParent as HTMLElement
+      const trOffsetTop = trElem.offsetTop + (trOffsetParent ? trOffsetParent.offsetTop : 0)
       const trHeight = trElem.clientHeight
       // 检测行是否在可视区中
-      if (trOffsetTop < bodySrcollTop || trOffsetTop > bodySrcollTop + bodyHeight) {
-        // 向上定位
-        return $xetable.scrollTo(null, trOffsetTop)
-      } else if (trOffsetTop + trHeight >= bodyHeight + bodySrcollTop) {
-        // 向下定位
-        return $xetable.scrollTo(null, bodySrcollTop + trHeight)
+      if (trOffsetTop < bodyScrollTop || trOffsetTop > bodyScrollTop + bodyHeight) {
+        return $xeTable.scrollTo(null, trOffsetTop)
+      } else if (trOffsetTop + trHeight >= bodyHeight + bodyScrollTop) {
+        return $xeTable.scrollTo(null, bodyScrollTop + trHeight)
       }
     } else {
-      // 如果是虚拟渲染跨行滚动
-      if ($xetable.scrollYLoad) {
-        return $xetable.scrollTo(null, ($xetable.afterFullData.indexOf(row) - 1) * $xetable.scrollYStore.rowHeight)
+      // 如果是虚拟渲染滚动
+      if (scrollYLoad) {
+        if (showOverflow) {
+          return $xeTable.scrollTo(null, ($xeTable.findRowIndexOf(afterFullData, row) - 1) * scrollYStore.rowHeight)
+        }
+        let scrollTop = 0
+        const rest = fullAllDataRowIdData[rowid]
+        const rHeight = rest ? rest.height : 0
+        for (let i = 0; i < afterFullData.length; i++) {
+          const currRow = afterFullData[i]
+          const currRowid = getRowid($xeTable, currRow)
+          if (currRow === row || currRowid === rowid) {
+            break
+          }
+          const rest = fullAllDataRowIdData[currRowid]
+          scrollTop += rest ? rest.height : 0
+        }
+        if (scrollTop < bodyScrollTop) {
+          return $xeTable.scrollTo(null, scrollTop - offsetFixedLeft - 1)
+        }
+        return $xeTable.scrollTo(null, (scrollTop + rHeight) - (bodyHeight - offsetFixedRight - 1))
       }
     }
   }
@@ -376,9 +398,12 @@ export function rowToVisible ($xetable: any, row: any) {
 
 export function colToVisible ($xeTable: any, column: any) {
   const { columnStore, scrollXLoad, visibleColumn } = $xeTable
-  const { tableBody } = $xeTable.$refs
+  const tableBody: any = $xeTable.$refs.tableBody
   const { leftList, rightList } = columnStore
   const bodyElem = tableBody ? tableBody.$el : null
+  if (column.fixed) {
+    return Promise.resolve()
+  }
   let offsetFixedLeft = 0
   leftList.forEach((item: any) => {
     offsetFixedLeft += item.renderWidth
@@ -389,15 +414,15 @@ export function colToVisible ($xeTable: any, column: any) {
   })
   if (bodyElem) {
     const bodyWidth = bodyElem.clientWidth
-    const bodySrcollLeft = bodyElem.scrollLeft
+    const bodyScrollLeft = bodyElem.scrollLeft
     const tdElem = bodyElem.querySelector(`.${column.id}`)
     if (tdElem) {
       const tdOffsetLeft = tdElem.offsetLeft + (tdElem.offsetParent ? tdElem.offsetParent.offsetLeft : 0)
       const cellWidth = tdElem.clientWidth
       // 检测是否在可视区中
-      if (tdOffsetLeft < (bodySrcollLeft + offsetFixedLeft)) {
+      if (tdOffsetLeft < (bodyScrollLeft + offsetFixedLeft)) {
         return $xeTable.scrollTo(tdOffsetLeft - offsetFixedLeft - 1)
-      } else if ((tdOffsetLeft + cellWidth - bodySrcollLeft) > (bodyWidth - offsetFixedRight)) {
+      } else if ((tdOffsetLeft + cellWidth - bodyScrollLeft) > (bodyWidth - offsetFixedRight)) {
         return $xeTable.scrollTo((tdOffsetLeft + cellWidth) - (bodyWidth - offsetFixedRight - 1))
       }
     } else {
@@ -405,13 +430,13 @@ export function colToVisible ($xeTable: any, column: any) {
       if (scrollXLoad) {
         let scrollLeft = 0
         const cellWidth = column.renderWidth
-        for (let index = 0; index < visibleColumn.length; index++) {
-          if (visibleColumn[index] === column) {
+        for (let i = 0; i < visibleColumn.length; i++) {
+          if (visibleColumn[i] === column) {
             break
           }
-          scrollLeft += visibleColumn[index].renderWidth
+          scrollLeft += visibleColumn[i].renderWidth
         }
-        if (scrollLeft < bodySrcollLeft) {
+        if (scrollLeft < bodyScrollLeft) {
           return $xeTable.scrollTo(scrollLeft - offsetFixedLeft - 1)
         }
         return $xeTable.scrollTo((scrollLeft + cellWidth) - (bodyWidth - offsetFixedRight - 1))

package/packages/ui/index.ts

@@ -6,7 +6,7 @@ import type { VxeUploadDefines, VxePrintDefines, VxeGlobalConfig } from 'vxe-pc-
 export const version = process.env.VUE_APP_VXE_VERSION as string
 
 VxeUI.version = version
-VxeUI.tableVersion = process.env.VUE_APP_VXE_VERSION as string
+VxeUI.tableVersion = version
 
 VxeUI.setConfig({
   emptyCell: '　',

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

@@ -36,7 +36,7 @@
   border-radius: var(--vxe-ui-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
-  box-shadow: 0 1px 6px rgba(0,0,0,.2);
+  box-shadow: var(--vxe-ui-base-popup-box-shadow);
   z-index: 10;
   &:not(.is--multiple) {
     text-align: center;

package/styles/components/table.scss

@@ -532,14 +532,10 @@
   font-family: var(--vxe-ui-font-family);
   direction: ltr;
   .vxe-table--body-wrapper {
-    & > table {
-      background-color: var(--vxe-ui-layout-background-color);
-    }
+    background-color: var(--vxe-ui-layout-background-color);
   }
   .vxe-table--footer-wrapper {
-    & > table {
-      background-color: var(--vxe-ui-table-footer-background-color);
-    }
+    background-color: var(--vxe-ui-table-footer-background-color);
   }
   .vxe-table--header,
   .vxe-table--body,
@@ -934,6 +930,48 @@
       }
     }
   }
+  // 滚动条
+  .vxe-table--scroll-x-virtual,
+  .vxe-table--scroll-y-virtual {
+    position: absolute;
+    z-index: 7;
+    overflow: hidden;
+  }
+  .vxe-table--scroll-x-handle,
+  .vxe-table--scroll-y-handle {
+    position: absolute;
+    div {
+      display: block;
+    }
+  }
+  .vxe-table--scroll-x-virtual,
+  .vxe-table--scroll-x-handle {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+  }
+  .vxe-table--scroll-x-handle {
+    overflow-y: hidden;
+    overflow-x: auto;
+    height: 18px;
+  }
+  .vxe-table--scroll-y-virtual,
+  .vxe-table--scroll-y-handle {
+    height: 100%;
+    right: 0;
+    top: 0;
+  }
+  .vxe-table--scroll-y-handle {
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 18px;
+  }
+  .vxe-table--scroll-x-space {
+    height: 1px;
+  }
+  .vxe-table--scroll-y-space {
+    width: 1px;
+  }
 
   &.is--padding {
     .vxe-cell {
@@ -972,6 +1010,7 @@
     background-color: inherit;
     transition: 0.3s box-shadow;
     outline: 0;
+    background-color: var(--vxe-ui-layout-background-color);
     .vxe-table--body-wrapper {
       overflow-x: hidden;
       outline: 0;

package/styles/modules.scss

@@ -1,5 +1,3 @@
-/*已废弃*/
-
 @use './components/column.scss';
 @use './components/colgroup.scss';
 @use './components/table.scss';

package/styles/theme/base.scss

@@ -68,7 +68,7 @@
   --vxe-ui-table-cell-extend-area-border-color: var(--vxe-ui-table-cell-area-border-color);
   --vxe-ui-table-cell-active-area-border-color: var(--vxe-ui-table-cell-area-border-color);
   --vxe-ui-table-cell-area-background-color: rgba(64,158,255,0.2);
-  --vxe-ui-table-header-active-area-background-color: rgba(64,158,255,0.1);
+  --vxe-ui-table-header-active-area-background-color: rgba(64,158,255,0.05);
 
   --vxe-ui-table-expand-padding-default: 16px;
 

package/styles/theme/dark.scss

@@ -5,13 +5,16 @@
 
   /*font color*/
   --vxe-ui-font-color: #a0a3a7;
+  --vxe-ui-font-tinge-color: #33353b;
+  --vxe-ui-font-lighten-color: #797b80;
+  --vxe-ui-font-darken-color: #47494c;
+  --vxe-ui-font-disabled-color: #464646;
+
+  /*font status color*/
   --vxe-ui-font-primary-color: #409eff;
-  --vxe-ui-font-lighten-color: #babdc0;
-  --vxe-ui-font-darken-color: #86898e;
-  --vxe-ui-font-disabled-color: #BFBFBF;
 
   /*base*/
-  --vxe-ui-base-popup-border-color: var(--vxe-ui-layout-background-color);
+  --vxe-ui-base-popup-border-color: #424242;
   --vxe-ui-base-popup-box-shadow: 0px 12px 30px 8px rgba(0, 0, 0, 0.5);
 
   /*layout*/

package/styles/variable.scss

@@ -1,10 +1,13 @@
 /*font color*/
 $vxe-ui-font-color: #606266;
-$vxe-ui-font-primary-color: #409eff;
+$vxe-ui-font-tinge-color: #d4d5d7;
 $vxe-ui-font-lighten-color: #797b80;
 $vxe-ui-font-darken-color: #47494c;
 $vxe-ui-font-disabled-color: #BFBFBF;
 
+/*font status color*/
+$vxe-ui-font-primary-color: #409eff;
+
 /*base*/
 $vxe-ui-base-popup-border-color: #DADCE0;
 $vxe-ui-base-popup-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
@@ -33,3 +36,4 @@ $vxe-ui-table-row-hover-checkbox-checked-background-color: #ffebbc;
 $vxe-ui-table-row-current-background-color: #e6f7ff;
 $vxe-ui-table-row-hover-current-background-color: #d7effb;
 $vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.12);
+