vxe-table 3.15.26 → 3.15.27

package/packages/table/src/table.ts

@@ -2,7 +2,7 @@ import { CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { getFuncText, isEnableConf } from '../../ui/src/utils'
 import { initTpImg } from '../../ui/src/dom'
-import { createHandleGetRowId, getCellHeight } from './util'
+import { createHandleGetRowId, getCellHeight, hasDeepKey } from './util'
 import { VxeUI } from '../../ui'
 import methods from './methods'
 import TableBodyComponent from './body'
@@ -30,6 +30,14 @@ import type { VxeTableConstructor, VxeTablePrivateMethods, TableInternalData, Ta
 
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
 
+function handleKeyField ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const keyField = $xeTable.computeRowField
+  internalData.currKeyField = keyField
+  internalData.isCurrDeepKey = hasDeepKey(keyField)
+}
+
 /**
  * 渲染浮固定列
  * 分别渲染左边固定列和右边固定列
@@ -730,6 +738,13 @@ export default {
       }
       return ''
     },
+    computeRowField () {
+      const $xeTable = this
+      const props = $xeTable
+
+      const rowOpts = $xeTable.computeRowOpts
+      return `${props.rowId || rowOpts.keyField || '_X_ROW_KEY'}`
+    },
     validOpts () {
       return this.computeValidOpts
     },
@@ -1202,12 +1217,12 @@ export default {
       return fixedSize
     },
     fixedColumnSize () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       return $xeTable.computeFixedColumnSize
     },
     computeIsMaxFixedColumn () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       const fixedColumnSize = $xeTable.computeFixedColumnSize
       const columnOpts = $xeTable.columnOpts
@@ -1252,8 +1267,8 @@ export default {
       return false
     },
     computeVirtualScrollBars () {
-      const $xeTable = this
-      const reactData = $xeTable
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
 
       const { overflowX, scrollXLoad, overflowY, scrollYLoad } = reactData
       return {
@@ -1333,7 +1348,7 @@ export default {
       this.reScrollFlag++
     },
     reScrollFlag () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       $xeTable.$nextTick(() => {
         $xeTable.recalculate(true).then(() => $xeTable.refreshScroll())
@@ -1365,7 +1380,7 @@ export default {
       this.footFlag++
     },
     footFlag () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       $xeTable.updateFooter()
     },
@@ -1395,6 +1410,21 @@ export default {
       const $xeTable = this
 
       $xeTable.handleUpdateRowGroup(val)
+    },
+    computeRowField () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
+      // 行主键被改变，重载表格
+      const { inited, tableFullData } = internalData
+      if (inited) {
+        handleKeyField($xeTable)
+        reactData.tableData = []
+        $xeTable.$nextTick(() => {
+          $xeTable.reloadData(tableFullData)
+        })
+      }
     }
   } as any,
   created () {
@@ -1404,6 +1434,8 @@ export default {
 
     Object.assign($xeTable, {
       tZindex: 0,
+      currKeyField: '',
+      isCurrDeepKey: false,
       elemStore: {},
       // 存放横向 X 虚拟滚动相关的信息
       scrollXStore: {
@@ -1514,6 +1546,8 @@ export default {
       swYTotal: 0
     })
 
+    handleKeyField($xeTable)
+
     const { data, exportConfig, importConfig, treeConfig, showOverflow, highlightCurrentRow, highlightCurrentColumn } = props
     const { scrollXStore, scrollYStore } = internalData
     const columnOpts = $xeTable.computeColumnOpts

package/packages/table/src/util.ts

@@ -97,39 +97,44 @@ export function getRowUniqueId () {
   return XEUtils.uniqueId('row_')
 }
 
+export function hasDeepKey (rowKey: string) {
+  return rowKey.indexOf('.') > -1
+}
+
 // 行主键 key
 export function getRowkey ($xeTable: VxeTableConstructor) {
-  const props = $xeTable
-  const rowOpts = $xeTable.computeRowOpts
-  return `${props.rowId || rowOpts.keyField || '_X_ROW_KEY'}`
+  const internalData = $xeTable as unknown as TableInternalData
+  const { currKeyField } = internalData
+  return currKeyField
 }
 
 // 行主键 value
 export function getRowid ($xeTable: VxeTableConstructor, row: any) {
-  const rowid = XEUtils.get(row, getRowkey($xeTable))
-  return encodeRowid(rowid)
+  const internalData = $xeTable as unknown as TableInternalData
+  const { isCurrDeepKey, currKeyField } = internalData
+  return row ? encodeRowid((isCurrDeepKey ? getDeepRowIdByKey : getFastRowIdByKey)(row, currKeyField)) : ''
 }
 
 export function createHandleUpdateRowId ($xeTable: VxeTableConstructor) {
-  const rowKey = getRowkey($xeTable)
-  const isDeepKey = rowKey.indexOf('.') > -1
-  const updateRId = isDeepKey ? updateDeepRowKey : updateFastRowKey
+  const internalData = $xeTable as unknown as TableInternalData
+  const { isCurrDeepKey, currKeyField } = internalData
+  const updateRId = isCurrDeepKey ? updateDeepRowKey : updateFastRowKey
   return {
-    rowKey,
+    rowKey: currKeyField,
     handleUpdateRowId (row: any) {
-      return row ? updateRId(row, rowKey) : null
+      return row ? updateRId(row, currKeyField) : ''
     }
   }
 }
 
 export function createHandleGetRowId ($xeTable: VxeTableConstructor) {
-  const rowKey = getRowkey($xeTable)
-  const isDeepKey = rowKey.indexOf('.') > -1
-  const getRId = isDeepKey ? getDeepRowIdByKey : getFastRowIdByKey
+  const internalData = $xeTable as unknown as TableInternalData
+  const { isCurrDeepKey, currKeyField } = internalData
+  const getRId = isCurrDeepKey ? getDeepRowIdByKey : getFastRowIdByKey
   return {
-    rowKey,
+    rowKey: currKeyField,
     handleGetRowId (row: any) {
-      return row ? getRId(row, rowKey) : null
+      return row ? encodeRowid(getRId(row, currKeyField)) : ''
     }
   }
 }
@@ -144,7 +149,7 @@ function getDeepRowIdByKey (row: any, rowKey: string) {
 }
 
 export function updateDeepRowKey (row: any, rowKey: string) {
-  let rowid = getDeepRowIdByKey(row, rowKey)
+  let rowid = encodeRowid(getDeepRowIdByKey(row, rowKey))
   if (eqEmptyValue(rowid)) {
     rowid = getRowUniqueId()
     XEUtils.set(row, rowKey, rowid)
@@ -157,7 +162,7 @@ function getFastRowIdByKey (row: any, rowKey: string) {
 }
 
 export function updateFastRowKey (row: any, rowKey: string) {
-  let rowid = getFastRowIdByKey(row, rowKey)
+  let rowid = encodeRowid(getFastRowIdByKey(row, rowKey))
   if (eqEmptyValue(rowid)) {
     rowid = getRowUniqueId()
     row[rowKey] = rowid
@@ -165,7 +170,7 @@ export function updateFastRowKey (row: any, rowKey: string) {
   return rowid
 }
 
-function getPaddingLeftRightSize (elem: any) {
+function getPaddingLeftRightSize (elem: HTMLElement | null) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)
     const paddingLeft = XEUtils.toNumber(computedStyle.paddingLeft)
@@ -175,7 +180,7 @@ function getPaddingLeftRightSize (elem: any) {
   return 0
 }
 
-function getElementMarginAndWidth (elem: any) {
+function getElementMarginAndWidth (elem: HTMLElement | null) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)
     const marginLeft = XEUtils.toNumber(computedStyle.marginLeft)