vxe-table 4.18.0-beta.2 → 4.18.0-beta.20

package/packages/table/src/util.ts

@@ -81,6 +81,8 @@ export function createInternalData (): TableInternalData {
     // 数据集（仅可视）
     visibleDataRowIdData: {},
 
+    keepUpdateFieldMaps: {},
+
     footerFullDataRowData: {},
 
     // 渲染中缓存数据
@@ -144,6 +146,7 @@ export function createInternalData (): TableInternalData {
 
 export function createReactData (): TableReactData {
   return {
+    updateColFlag: 0,
     // 低性能的静态列
     staticColumns: [],
     // 渲染的列分组
@@ -213,7 +216,8 @@ export function createReactData (): TableReactData {
       activeBtn: false,
       activeWrapper: false,
       visible: false,
-      maxHeight: 0,
+      maxHeight: null,
+      popupTop: 0,
       oldSortMaps: {},
       oldFixedMaps: {},
       oldVisibleMaps: {}
@@ -543,11 +547,19 @@ export function restoreScrollLocation ($xeTable: VxeTableConstructor, scrollLeft
   return $xeTable.clearScroll()
 }
 
+export function getRowUniqueId () {
+  return XEUtils.uniqueId('row_')
+}
+
 /**
  * 生成行的唯一主键
  */
-export function getRowUniqueId () {
-  return XEUtils.uniqueId('row_')
+export function createRowId (rowOpts: VxeTablePropTypes.RowConfig, row: any, keyField: string) {
+  const { createKeyMethod } = rowOpts
+  if (createKeyMethod) {
+    return createKeyMethod({ row, keyField })
+  }
+  return getRowUniqueId()
 }
 
 export function hasDeepKey (rowKey: string) {
@@ -570,11 +582,13 @@ export function getRowid ($xeTable: VxeTableConstructor, row: any) {
 export function createHandleUpdateRowId ($xeTable: VxeTableConstructor) {
   const internalData = $xeTable.internalData
   const { isCurrDeepKey, currKeyField } = internalData
+  const { computeRowOpts } = $xeTable.getComputeMaps()
+  const rowOpts = computeRowOpts.value
   const updateRId = isCurrDeepKey ? updateDeepRowKey : updateFastRowKey
   return {
     rowKey: currKeyField,
     handleUpdateRowId (row: any) {
-      return row ? updateRId(row, currKeyField) : ''
+      return row ? updateRId(rowOpts, row, currKeyField) : ''
     }
   }
 }
@@ -600,10 +614,11 @@ function getDeepRowIdByKey (row: any, rowKey: string) {
   return XEUtils.get(row, rowKey)
 }
 
-export function updateDeepRowKey (row: any, rowKey: string) {
+function updateDeepRowKey (rowOpts: VxeTablePropTypes.RowConfig, row: any, rowKey: string) {
   let rowid = encodeRowid(getDeepRowIdByKey(row, rowKey))
   if (eqEmptyValue(rowid)) {
-    rowid = getRowUniqueId()
+    const newRowid = createRowId(rowOpts, row, rowKey)
+    rowid = '' + newRowid
     XEUtils.set(row, rowKey, rowid)
   }
   return rowid
@@ -613,11 +628,12 @@ function getFastRowIdByKey (row: any, rowKey: string) {
   return row[rowKey]
 }
 
-export function updateFastRowKey (row: any, rowKey: string) {
+function updateFastRowKey (rowOpts: VxeTablePropTypes.RowConfig, row: any, rowKey: string) {
   let rowid = encodeRowid(getFastRowIdByKey(row, rowKey))
   if (eqEmptyValue(rowid)) {
-    rowid = getRowUniqueId()
-    row[rowKey] = rowid
+    const newRowid = createRowId(rowOpts, row, rowKey)
+    rowid = '' + newRowid
+    row[rowKey] = newRowid
   }
   return rowid
 }

package/packages/toolbar/src/toolbar.ts

@@ -1,4 +1,4 @@
-import { h, ref, computed, inject, createCommentVNode, VNode, reactive, nextTick, PropType, onUnmounted } from 'vue'
+import { h, ref, computed, inject, createCommentVNode, VNode, reactive, nextTick, PropType, onBeforeUnmount } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
@@ -10,6 +10,14 @@ import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, ToolbarInt
 
 const { getConfig, getIcon, getI18n, renderer, commands, createEvent, useFns } = VxeUI
 
+function createReactData (): ToolbarReactData {
+  return {
+    isRefresh: false,
+    connectFlag: 0,
+    columns: []
+  }
+}
+
 function createInternalData (): ToolbarInternalData {
   return {
     connectTable: null
@@ -68,11 +76,7 @@ export default defineVxeComponent({
 
     const { computeSize } = useFns.useSize(props)
 
-    const reactData = reactive<ToolbarReactData>({
-      isRefresh: false,
-      connectFlag: 0,
-      columns: []
-    })
+    const reactData = reactive(createReactData())
 
     const internalData = createInternalData()
 
@@ -684,7 +688,8 @@ export default defineVxeComponent({
       }
     })
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
+      XEUtils.assign(reactData, createReactData())
       XEUtils.assign(internalData, createInternalData())
     })
 

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

@@ -239,6 +239,7 @@
     word-break: break-all;
     border-spacing: 0;
     border-collapse: separate;
+    box-sizing: border-box;
     th {
       position: sticky;
       top: 0;
@@ -254,6 +255,7 @@
       border-left: 1px solid var(--vxe-ui-table-border-color);
     }
     tr {
+      box-sizing: border-box;
       &:first-child {
         td {
           border-top: 0;
@@ -267,6 +269,7 @@
     td {
       height: 44px;
       padding: 0 0.6em;
+      box-sizing: border-box;
       &:last-child {
         border-right: 1px solid var(--vxe-ui-table-border-color);
       }

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

@@ -39,7 +39,7 @@
   border: 1px solid var(--vxe-ui-base-popup-border-color);
   color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
-  z-index: 10;
+  z-index: 15;
   &:not(.is--multiple) {
     .vxe-table--filter-header,
     .vxe-table--filter-body {

package/styles/components/table.scss

@@ -2220,12 +2220,18 @@ $btnThemeList: (
     left: 0;
     width: 100%;
     overflow: auto;
-    background-color: var(--vxe-ui-layout-background-color);
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
     pointer-events: all;
     &.is--padding {
-      padding: var(--vxe-ui-table-expand-padding-default);
+      .vxe-body--row-expanded-content {
+        padding: var(--vxe-ui-table-expand-padding-default);
+      }
     }
   }
+  .vxe-body--row-expanded-content {
+    background-color: var(--vxe-ui-layout-background-color);
+  }
   .vxe-body--row-expanded-place-column {
     border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
     border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);

package/styles/components/toolbar.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.6em 0;
+  padding: 0.5em 0;
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   background-color: var(--vxe-ui-layout-background-color);
@@ -104,13 +104,17 @@
 
 .vxe-toolbar {
   font-size: var(--vxe-ui-font-size-default);
+  min-height: var(--vxe-ui-toolbar-height-default);
   &.size--medium {
     font-size: var(--vxe-ui-font-size-medium);
+    min-height: var(--vxe-ui-toolbar-height-medium);
   }
   &.size--small {
     font-size: var(--vxe-ui-font-size-small);
+    min-height: var(--vxe-ui-toolbar-height-small);
   }
   &.size--mini {
     font-size: var(--vxe-ui-font-size-mini);
+    min-height: var(--vxe-ui-toolbar-height-mini);
   }
 }

package/styles/theme/base.scss

@@ -85,4 +85,8 @@
 
   /*toolbar*/
   --vxe-ui-toolbar-custom-active-background-color: #D9DADB;
+  --vxe-ui-toolbar-height-default: 48px;
+  --vxe-ui-toolbar-height-medium: 46px;
+  --vxe-ui-toolbar-height-small: 44px;
+  --vxe-ui-toolbar-height-mini: 42px;
 }