vxe-table 3.12.10-beta.2 → 3.12.10-beta.21

package/packages/table/src/props.ts

@@ -34,10 +34,10 @@ export default {
     type: [Boolean, String] as PropType<VxeTablePropTypes.Border>,
     default: () => getConfig().table.border
   },
-  // 单元格是否有边距
+  // 已废弃，被 cell-config.padding 替换
   padding: {
     type: Boolean as PropType<VxeTablePropTypes.Padding>,
-    default: () => getConfig().table.padding
+    default: null
   },
   // 是否圆角边框
   round: {
@@ -163,6 +163,10 @@ export default {
   columnConfig: Object,
   // 单元格配置信息
   cellConfig: Object as PropType<VxeTablePropTypes.CellConfig>,
+  // 表头单元格配置信息
+  headerCellConfig: Object as PropType<VxeTablePropTypes.HeaderCellConfig>,
+  // 表尾单元格配置信息
+  footerCellConfig: Object as PropType<VxeTablePropTypes.FooterCellConfig>,
   // 行配置信息
   rowConfig: Object,
   // 已废弃，被 rowDragConfig 替换

package/packages/table/src/table.ts

@@ -178,13 +178,155 @@ const renderDragTip = (h: CreateElement, $xeTable: any) => {
   return renderEmptyElement($xeTable)
 }
 
-function handleUupdateResize (_vm: any) {
+function handleUpdateResize (_vm: any) {
   const { $el } = _vm
   if ($el && $el.clientWidth && $el.clientHeight) {
     _vm.recalculate()
   }
 }
 
+function renderScrollX (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  return h('div', {
+    key: 'vsx',
+    ref: 'refScrollXVirtualElem',
+    class: 'vxe-table--scroll-x-virtual'
+  }, [
+    h('div', {
+      ref: 'refScrollXLeftCornerElem',
+      class: 'vxe-table--scroll-x-left-corner'
+    }),
+    h('div', {
+      ref: 'refScrollXWrapperElem',
+      class: 'vxe-table--scroll-x-wrapper'
+    }, [
+      h('div', {
+        ref: 'refScrollXHandleElem',
+        class: 'vxe-table--scroll-x-handle',
+        on: {
+          scroll: $xeTable.triggerVirtualScrollXEvent
+        }
+      }, [
+        h('div', {
+          ref: 'refScrollXSpaceElem',
+          class: 'vxe-table--scroll-x-space'
+        })
+      ])
+    ]),
+    h('div', {
+      ref: 'refScrollXRightCornerElem',
+      class: 'vxe-table--scroll-x-right-corner'
+    })
+  ])
+}
+
+function renderScrollY (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  return h('div', {
+    ref: 'refScrollYVirtualElem',
+    class: 'vxe-table--scroll-y-virtual'
+  }, [
+    h('div', {
+      ref: 'refScrollYTopCornerElem',
+      class: 'vxe-table--scroll-y-top-corner'
+    }),
+    h('div', {
+      ref: 'refScrollYWrapperElem',
+      class: 'vxe-table--scroll-y-wrapper'
+    }, [
+      h('div', {
+        ref: 'refScrollYHandleElem',
+        class: 'vxe-table--scroll-y-handle',
+        on: {
+          scroll: $xeTable.triggerVirtualScrollYEvent
+        }
+      }, [
+        h('div', {
+          ref: 'refScrollYSpaceElem',
+          class: 'vxe-table--scroll-y-space'
+        })
+      ])
+    ]),
+    h('div', {
+      ref: 'refScrollYBottomCornerElem',
+      class: 'vxe-table--scroll-y-bottom-corner'
+    })
+  ])
+}
+
+function renderViewport (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+
+  const { showHeader, showFooter } = props
+  const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData
+  const { leftList, rightList } = columnStore
+
+  return h('div', {
+    ref: 'refTableViewportElem',
+    class: 'vxe-table--viewport-wrapper'
+  }, [
+    h('div', {
+      class: 'vxe-table--main-wrapper'
+    }, [
+      /**
+         * 表头
+         */
+      showHeader
+        ? h(TableHeaderComponent, {
+          ref: 'refTableHeader',
+          props: {
+            tableData,
+            tableColumn,
+            tableGroupColumn
+          }
+        })
+        : renderEmptyElement($xeTable),
+      /**
+         * 表体
+         */
+      h(TableBodyComponent, {
+        ref: 'refTableBody',
+        props: {
+          tableData,
+          tableColumn
+        }
+      }),
+      /**
+         * 表尾
+         */
+      showFooter
+        ? h(TableFooterComponent, {
+          ref: 'refTableFooter',
+          props: {
+            footerTableData,
+            tableColumn
+          }
+        })
+        : renderEmptyElement($xeTable)
+    ]),
+    h('div', {
+      class: 'vxe-table--fixed-wrapper'
+    }, [
+      leftList && leftList.length && overflowX ? renderFixed(h, $xeTable, 'left') : renderEmptyElement($xeTable),
+      rightList && rightList.length && overflowX ? renderFixed(h, $xeTable, 'right') : renderEmptyElement($xeTable)
+    ])
+  ])
+}
+
+function renderBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
+  return h('div', {
+    class: 'vxe-table--layout-wrapper'
+  }, scrollbarYToLeft
+    ? [
+        renderScrollY(h, $xeTable),
+        renderViewport(h, $xeTable)
+      ]
+    : [
+        renderViewport(h, $xeTable),
+        renderScrollY(h, $xeTable)
+      ])
+}
+
 export default {
   name: 'VxeTable',
   mixins: [
@@ -220,8 +362,7 @@ export default {
     const xID = XEUtils.uniqueId()
     return {
       xID,
-      tId: `${XEUtils.uniqueId()}`,
-      isCalcColumn: false,
+      tId: xID,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -434,7 +575,8 @@ export default {
 
       scrollVMLoading: false,
 
-      isCalcCellHeight: 0,
+      calcCellHeightFlag: 0,
+      resizeHeightFlag: 0,
 
       isCustomStatus: false,
 
@@ -444,8 +586,12 @@ export default {
       dragCol: null,
       dragTipText: '',
 
-      _isResize: false,
-      isLoading: false
+      isDragResize: false,
+      isLoading: false,
+
+      reScrollFlag: 0,
+      reLayoutFlag: 0,
+      footFlag: 0
     }
   },
   computed: {
@@ -511,6 +657,18 @@ export default {
 
       return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig)
     },
+    computeScrollbarXToTop () {
+      const $xeTable = this
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top')
+    },
+    computeScrollbarYToLeft () {
+      const $xeTable = this
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left')
+    },
     computeScrollYThreshold () {
       const $xeTable = this
 
@@ -537,7 +695,7 @@ export default {
 
       const vSize = $xeTable.computeSize
       const rowHeightMaps = $xeTable.computeRowHeightMaps
-      return rowHeightMaps[vSize || 'default']
+      return rowHeightMaps[vSize || 'default'] || 18
     },
     columnOpts () {
       return this.computeColumnOpts
@@ -546,7 +704,22 @@ export default {
       return Object.assign({}, getConfig().table.columnConfig, this.columnConfig)
     },
     computeCellOpts () {
-      return Object.assign({}, getConfig().table.cellConfig, this.cellConfig)
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.cellConfig, props.cellConfig)
+    },
+    computeHeaderCellOpts () {
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig)
+    },
+    computeFooterCellOpts () {
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig)
     },
     rowOpts () {
       return this.computeRowOpts
@@ -599,6 +772,20 @@ export default {
     tipConfig () {
       return { ...this.tooltipOpts }
     },
+    computeTableTipConfig () {
+      const $xeTable = this
+      const reactData = $xeTable
+
+      const { tooltipStore } = reactData
+      const tooltipOpts = $xeTable.computeTooltipOpts
+      return Object.assign({}, tooltipOpts, tooltipStore.currOpts)
+    },
+    computeValidTipConfig () {
+      const $xeTable = this
+
+      const tooltipOpts = $xeTable.computeTooltipOpts
+      return Object.assign({}, tooltipOpts)
+    },
     validTipOpts () {
       return Object.assign({ isArrow: false }, this.tooltipOpts)
     },
@@ -651,24 +838,59 @@ export default {
       return Object.assign({}, getConfig().table.fnrConfig, this.fnrConfig)
     },
     headerCtxMenu () {
-      const headerOpts = this.ctxMenuOpts.header
+      return this.computeHeaderMenu
+    },
+    computeHeaderMenu () {
+      const $xeTable = this
+
+      const menuOpts = $xeTable.computeMenuOpts
+      const headerOpts = menuOpts.header
       return headerOpts && headerOpts.options ? headerOpts.options : []
     },
     bodyCtxMenu () {
-      const bodyOpts = this.ctxMenuOpts.body
+      return this.computeBodyMenu
+    },
+    computeBodyMenu () {
+      const $xeTable = this
+
+      const menuOpts = $xeTable.computeMenuOpts
+      const bodyOpts = menuOpts.body
       return bodyOpts && bodyOpts.options ? bodyOpts.options : []
     },
     footerCtxMenu () {
-      const footerOpts = this.ctxMenuOpts.footer
+      return this.computeFooterMenu
+    },
+    computeFooterMenu () {
+      const $xeTable = this
+
+      const menuOpts = $xeTable.computeMenuOpts
+      const footerOpts = menuOpts.footer
       return footerOpts && footerOpts.options ? footerOpts.options : []
     },
     isCtxMenu () {
-      return !!((this.contextMenu || this.menuConfig) && isEnableConf(this.ctxMenuOpts) && (this.headerCtxMenu.length || this.bodyCtxMenu.length || this.footerCtxMenu.length))
+      return this.computeIsMenu
+    },
+    computeIsMenu () {
+      const $xeTable = this
+      const props = $xeTable
+
+      const menuOpts = $xeTable.computeMenuOpts
+      const headerMenu = $xeTable.computeHeaderMenu
+      const bodyMenu = $xeTable.computeBodyMenu
+      const footerMenu = $xeTable.computeFooterMenu
+      return !!((props.contextMenu || props.menuConfig) && isEnableConf(menuOpts) && (headerMenu.length || bodyMenu.length || footerMenu.length))
     },
     ctxMenuList () {
+      return this.computeMenuList
+    },
+    computeMenuList () {
+      const $xeTable = this
+      const reactData = $xeTable as TableReactData
+
+      const { ctxMenuStore } = reactData
       const rest: any[] = []
-      this.ctxMenuStore.list.forEach((list: any[]) => {
-        list.forEach(item => {
+      ctxMenuStore.list.forEach((list) => {
+        list.forEach((item) => {
           rest.push(item)
         })
       })
@@ -852,7 +1074,7 @@ export default {
       if (value && value.length >= 50000) {
         warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)'])
       }
-      this.loadTableData(value || []).then(() => {
+      this.loadTableData(value || [], false).then(() => {
         this.inited = true
         this.initStatus = true
         if (!initStatus) {
@@ -880,33 +1102,57 @@ export default {
     reColumnFlag () {
       this.$nextTick().then(() => this.refreshColumn())
     },
+
+    computeSize () {
+      this.reScrollFlag++
+    },
     showHeader () {
-      this.$nextTick(() => {
-        this.recalculate(true).then(() => this.refreshScroll())
-      })
+      this.reScrollFlag++
     },
     showFooter () {
-      this.$nextTick(() => {
-        this.recalculate(true).then(() => this.refreshScroll())
+      this.reScrollFlag++
+    },
+    reScrollFlag () {
+      const $xeTable = this
+
+      $xeTable.$nextTick(() => {
+        $xeTable.recalculate(true).then(() => $xeTable.refreshScroll())
       })
     },
+
     height () {
-      this.$nextTick(() => this.recalculate(true))
+      this.reLayoutFlag++
     },
     maxHeight () {
-      this.$nextTick(() => this.recalculate(true))
+      this.reLayoutFlag++
     },
-    computeSize () {
-      this.$nextTick(() => {
-        this.recalculate(true).then(() => this.refreshScroll())
-      })
+    computeScrollbarXToTop () {
+      this.reLayoutFlag++
+    },
+    computeScrollbarYToLeft () {
+      this.reLayoutFlag++
+    },
+    reLayoutFlag () {
+      const $xeTable = this
+
+      $xeTable.$nextTick(() => $xeTable.recalculate(true))
+    },
+
+    footerData () {
+      this.footFlag++
+    },
+    footFlag () {
+      const $xeTable = this
+
+      $xeTable.updateFooter()
     },
+
     syncResize (value: any) {
       if (value) {
-        handleUupdateResize(this)
+        handleUpdateResize(this)
         this.$nextTick(() => {
-          handleUupdateResize(this)
-          setTimeout(() => handleUupdateResize(this))
+          handleUpdateResize(this)
+          setTimeout(() => handleUpdateResize(this))
         })
       }
     },
@@ -1010,11 +1256,14 @@ export default {
       if (treeConfig && (treeOpts.showLine || treeOpts.line) && (!(this.rowKey || rowOpts.useKey) || !showOverflow)) {
         warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow'])
       }
+      if (treeConfig && !treeOpts.transform && this.stripe) {
+        warnLog('vxe.error.noTree', ['stripe'])
+      }
       if (this.showFooter && !(this.footerMethod || this.footerData)) {
         warnLog('vxe.error.reqProp', ['footer-data | footer-method'])
       }
-      if (treeConfig && !treeOpts.transform && this.stripe) {
-        warnLog('vxe.error.noTree', ['stripe'])
+      if (rowOpts.height) {
+        warnLog('vxe.error.delProp', ['row-config.height', 'cell-config.height'])
       }
       if (this.tooltipOpts.enabled) {
         warnLog('vxe.error.delProp', ['tooltip-config.enabled', 'tooltip-config.showAll'])
@@ -1160,7 +1409,7 @@ export default {
       endIndex: 1,
       visibleSize: 0
     })
-    this.loadTableData(data).then(() => {
+    this.loadTableData(data, true).then(() => {
       if (data && data.length) {
         this.inited = true
         this.initStatus = true
@@ -1276,10 +1525,11 @@ export default {
     const { xID } = $xeTable
 
     const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
-    const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData
+    const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore } = reactData
     const { leftList, rightList } = columnStore
     const loadingSlot = slots.loading
-    const tooltipOpts = $xeTable.computeTooltipOpts
+    const tableTipConfig = $xeTable.computeTableTipConfig
+    const validTipConfig = $xeTable.computeValidTipConfig
     const validOpts = $xeTable.computeValidOpts
     const checkboxOpts = $xeTable.computeCheckboxOpts
     const treeOpts = $xeTable.computeTreeOpts
@@ -1295,9 +1545,11 @@ export default {
     const resizableOpts = $xeTable.computeResizableOpts
     const isArea = mouseConfig && mouseOpts.area
     const columnDragOpts = $xeTable.computeColumnDragOpts
+    const scrollbarXToTop = $xeTable.computeScrollbarXToTop
+    const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
     return h('div', {
       ref: 'refElem',
-      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
+      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
         [`size--${vSize}`]: vSize,
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
@@ -1310,7 +1562,6 @@ export default {
         'row--highlight': rowOpts.isHover || highlightHoverRow,
         'column--highlight': columnOpts.isHover || highlightHoverColumn,
         'checkbox--range': checkboxOpts.range,
-        'column--calc': isCalcColumn,
         'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
         'is--header': showHeader,
         'is--footer': showFooter,
@@ -1319,7 +1570,6 @@ export default {
         'is--fixed-left': leftList.length,
         'is--fixed-right': rightList.length,
         'is--animat': !!props.animat,
-        'is--padding': props.padding,
         'is--round': props.round,
         'is--stripe': !treeConfig && stripe,
         'is--loading': currLoading,
@@ -1346,108 +1596,15 @@ export default {
       h('div', {
         key: 'tw',
         class: 'vxe-table--render-wrapper'
-      }, [
-        h('div', {
-          ref: 'refTableViewportElem',
-          class: 'vxe-table--viewport-wrapper'
-        }, [
-          h('div', {
-            class: 'vxe-table--main-wrapper'
-          }, [
-          /**
-           * 表头
-           */
-            showHeader
-              ? h(TableHeaderComponent, {
-                ref: 'refTableHeader',
-                props: {
-                  tableData,
-                  tableColumn,
-                  tableGroupColumn,
-                  size: vSize
-                }
-              })
-              : renderEmptyElement($xeTable),
-            /**
-           * 表体
-           */
-            h(TableBodyComponent, {
-              ref: 'refTableBody',
-              props: {
-                tableData,
-                tableColumn,
-                size: vSize
-              }
-            }),
-            /**
-           * 表尾
-           */
-            showFooter
-              ? h(TableFooterComponent, {
-                ref: 'refTableFooter',
-                props: {
-                  footerTableData,
-                  tableColumn,
-                  size: vSize
-                }
-              })
-              : renderEmptyElement($xeTable)
-          ]),
-          h('div', {
-            class: 'vxe-table--fixed-wrapper'
-          }, [
-            leftList && leftList.length && overflowX ? renderFixed(h, this, 'left') : renderEmptyElement($xeTable),
-            rightList && rightList.length && overflowX ? renderFixed(h, this, 'right') : renderEmptyElement($xeTable)
-          ])
-        ]),
-        h('div', {
-          ref: 'refScrollYVirtualElem',
-          class: 'vxe-table--scroll-y-virtual'
-        }, [
-          h('div', {
-            ref: 'refScrollYTopCornerElem',
-            class: 'vxe-table--scroll-y-top-corner'
-          }),
-          h('div', {
-            ref: 'refScrollYHandleElem',
-            class: 'vxe-table--scroll-y-handle',
-            on: {
-              scroll: this.scrollYEvent
-            }
-          }, [
-            h('div', {
-              ref: 'refScrollYSpaceElem',
-              class: 'vxe-table--scroll-y-space'
-            })
+      }, scrollbarXToTop
+        ? [
+            renderScrollX(h, $xeTable),
+            renderBody(h, $xeTable)
+          ]
+        : [
+            renderBody(h, $xeTable),
+            renderScrollX(h, $xeTable)
           ]),
-          h('div', {
-            ref: 'refScrollYBottomCornerElem',
-            class: 'vxe-table--scroll-y-bottom-corner'
-          })
-        ])
-      ]),
-      h('div', {
-        key: 'vx',
-        ref: 'refScrollXVirtualElem',
-        class: 'vxe-table--scroll-x-virtual'
-      }, [
-        h('div', {
-          ref: 'refScrollXHandleElem',
-          class: 'vxe-table--scroll-x-handle',
-          on: {
-            scroll: this.scrollXEvent
-          }
-        }, [
-          h('div', {
-            ref: 'refScrollXSpaceElem',
-            class: 'vxe-table--scroll-x-space'
-          })
-        ]),
-        h('div', {
-          ref: 'refScrollXRightCornerElem',
-          class: 'vxe-table--scroll-x-right-corner'
-        })
-      ]),
       /**
        * 空数据
        */
@@ -1471,18 +1628,27 @@ export default {
        * 列宽线
        */
       h('div', {
-        key: 'cl',
-        ref: 'refCellResizeBar',
-        class: 'vxe-table--resizable-bar',
-        style: overflowX
-          ? {
-              'padding-bottom': `${scrollbarHeight}px`
-            }
-          : undefined
+        key: 'tcl',
+        ref: 'refColResizeBar',
+        class: 'vxe-table--resizable-col-bar'
+      }, resizableOpts.showDragTip
+        ? [
+            h('div', {
+              ref: 'refColResizeTip',
+              class: 'vxe-table--resizable-number-tip'
+            })
+          ]
+        : []),
+      /**
+       * 行高线
+       */
+      h('div', {
+        key: 'trl',
+        ref: 'refRowResizeBar',
+        class: 'vxe-table--resizable-row-bar'
       }, resizableOpts.showDragTip
         ? [
             h('div', {
-              ref: 'refCellResizeTip',
               class: 'vxe-table--resizable-number-tip'
             })
           ]
@@ -1598,7 +1764,12 @@ export default {
           ? h(VxeUITooltipComponent, {
             key: 'btp',
             ref: 'tooltip',
-            props: Object.assign({}, tooltipOpts, tooltipStore.currOpts)
+            props: {
+              theme: tableTipConfig.theme,
+              enterable: tableTipConfig.enterable,
+              enterDelay: tableTipConfig.enterDelay,
+              leaveDelay: tableTipConfig.leaveDelay
+            }
           })
           : renderEmptyElement($xeTable),
         /**
@@ -1611,7 +1782,12 @@ export default {
             class: [{
               'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
             }, 'vxe-table--valid-error'],
-            props: validOpts.message === 'tooltip' || tableData.length === 1 ? Object.assign({ isArrow: false }, tooltipOpts) : {}
+            props: {
+              theme: validTipConfig.theme,
+              enterable: validTipConfig.enterable,
+              enterDelay: validTipConfig.enterDelay,
+              leaveDelay: validTipConfig.leaveDelay
+            }
           })
           : renderEmptyElement($xeTable)
       ])