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

package/packages/table/src/props.ts

@@ -164,9 +164,11 @@ export default {
   // 是否自动根据状态属性去更新响应式表格宽高
   syncResize: [Boolean, String, Number],
   // 响应式布局配置项
-  resizeConfig: Object,
+  resizeConfig: Object as PropType<VxeTablePropTypes.ResizeConfig>,
   // 列配置信息
-  columnConfig: Object,
+  columnConfig: Object as PropType<VxeTablePropTypes.ColumnConfig>,
+  // 当前列配置信息
+  currentColumnConfig: Object as PropType<VxeTablePropTypes.CurrentColumnConfig>,
   // 单元格配置信息
   cellConfig: Object as PropType<VxeTablePropTypes.CellConfig>,
   // 表头单元格配置信息
@@ -174,7 +176,9 @@ export default {
   // 表尾单元格配置信息
   footerCellConfig: Object as PropType<VxeTablePropTypes.FooterCellConfig>,
   // 行配置信息
-  rowConfig: Object,
+  rowConfig: Object as PropType<VxeTablePropTypes.RowConfig>,
+  // 当前行配置信息
+  currentRowConfig: Object as PropType<VxeTablePropTypes.CurrentRowConfig>,
   // 已废弃，被 rowDragConfig 替换
   dragConfig: Object as PropType<VxeTablePropTypes.DragConfig>,
   // 行拖拽排序配置项
@@ -182,27 +186,27 @@ export default {
   // 列拖拽排序配置项
   columnDragConfig: Object as PropType<VxeTablePropTypes.ColumnDragConfig>,
   // 列调整配置项
-  resizableConfig: Object,
+  resizableConfig: Object as PropType<VxeTablePropTypes.ResizableConfig>,
   // 序号配置项
-  seqConfig: Object,
+  seqConfig: Object as PropType<VxeTablePropTypes.SeqConfig>,
   // 排序配置项
-  sortConfig: Object,
+  sortConfig: Object as PropType<VxeTablePropTypes.SortConfig>,
   // 筛选配置项
-  filterConfig: Object,
+  filterConfig: Object as PropType<VxeTablePropTypes.FilterConfig>,
   // 单选框配置
-  radioConfig: Object,
+  radioConfig: Object as PropType<VxeTablePropTypes.RadioConfig>,
   // 复选框配置项
-  checkboxConfig: Object,
+  checkboxConfig: Object as PropType<VxeTablePropTypes.CheckboxConfig>,
   // tooltip 配置项
-  tooltipConfig: Object,
+  tooltipConfig: Object as PropType<VxeTablePropTypes.TooltipConfig>,
   // 导出配置项
   exportConfig: [Boolean, Object],
   // 导入配置项
   importConfig: [Boolean, Object],
   // 打印配置项
-  printConfig: Object,
+  printConfig: Object as PropType<VxeTablePropTypes.PrintConfig>,
   // 展开行配置项
-  expandConfig: Object,
+  expandConfig: Object as PropType<VxeTablePropTypes.ExpandConfig>,
   // 树形结构配置项
   treeConfig: [Boolean, Object],
   // 快捷菜单配置项

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 { getRowid } from './util'
+import { createHandleGetRowId } from './util'
 import { VxeUI } from '../../ui'
 import methods from './methods'
 import TableBodyComponent from './body'
@@ -209,6 +209,7 @@ function renderRowExpandedVNs (h: CreateElement, $xeTable: VxeTableConstructor &
   ]
 
   if (expandColumn) {
+    const { handleGetRowId } = createHandleGetRowId($xeTable)
     tableRowExpandedList.forEach((row) => {
       const expandOpts = $xeTable.computeExpandOpts
       const { height: expandHeight, padding } = expandOpts
@@ -216,7 +217,7 @@ function renderRowExpandedVNs (h: CreateElement, $xeTable: VxeTableConstructor &
       const treeOpts = $xeTable.computeTreeOpts
       const { transform, seqMode } = treeOpts
       const cellStyle: Record<string, string> = {}
-      const rowid = getRowid($xeTable, row)
+      const rowid = handleGetRowId(row)
       const rest = fullAllDataRowIdData[rowid]
       let rowLevel = 0
       let seq: string | number = -1
@@ -471,8 +472,6 @@ export default {
       isAllSelected: false,
       // 复选框属性，有选中且非全选状态
       isIndeterminate: false,
-      // 复选框属性，已选中的行集合
-      selectCheckboxMaps: {},
       // 当前行
       currentRow: null,
       // 单选框属性，选中列
@@ -486,16 +485,6 @@ export default {
       hasFixedColumn: false,
       // 树节点列信息
       treeNodeColumn: null,
-      // 已展开的行集合
-      rowExpandedMaps: {},
-      // 懒加载中的展开行的集合
-      rowExpandLazyLoadedMaps: {},
-      // 已展开树节点集合
-      treeExpandedMaps: {},
-      // 懒加载中的树节点的集合
-      treeExpandLazyLoadedMaps: {},
-      // 树节点不确定状态的集合
-      treeIndeterminateMaps: {},
       // 合并单元格的对象集
       mergeList: [],
       // 合并表尾数据的对象集
@@ -512,8 +501,6 @@ export default {
       upDataFlag: 0,
       // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
       reColumnFlag: 0,
-      // 已标记的对象集
-      pendingRowMaps: {},
       // 自定义列相关的信息
       customStore: {
         btnEl: null,
@@ -649,6 +636,11 @@ export default {
         isFooter: false
       },
 
+      rowExpandedFlag: 1,
+      treeExpandedFlag: 1,
+      updateCheckboxFlag: 1,
+      pendingRowFlag: 1,
+
       rowHeightStore: {
         default: 48,
         medium: 44,
@@ -774,13 +766,13 @@ export default {
       return this.computeRowHeightMaps
     },
     computeRowHeightMaps () {
-      const $xeTable = this
-      const reactData = $xeTable as TableReactData
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
 
       return reactData.rowHeightStore
     },
     computeDefaultRowHeight () {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       const vSize = $xeTable.computeSize
       const rowHeightMaps = $xeTable.computeRowHeightMaps
@@ -790,31 +782,61 @@ export default {
       return this.computeColumnOpts
     },
     computeColumnOpts () {
-      return Object.assign({}, getConfig().table.columnConfig, this.columnConfig)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.columnConfig, props.columnConfig)
+    },
+    computeCurrentColumnOpts () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.currentColumnConfig, props.currentColumnConfig)
     },
     computeCellOpts () {
       const $xeTable = this
       const props = $xeTable
 
-      return Object.assign({}, getConfig().table.cellConfig, props.cellConfig)
+      const cellOpts = Object.assign({}, getConfig().table.cellConfig, props.cellConfig)
+      if (cellOpts.height) {
+        cellOpts.height = XEUtils.toNumber(cellOpts.height)
+      }
+      return cellOpts
     },
     computeHeaderCellOpts () {
       const $xeTable = this
       const props = $xeTable
 
-      return Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig)
+      const headerCellOpts = Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig)
+      if (headerCellOpts.height) {
+        headerCellOpts.height = XEUtils.toNumber(headerCellOpts.height)
+      }
+      return headerCellOpts
     },
     computeFooterCellOpts () {
       const $xeTable = this
       const props = $xeTable
 
-      return Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig)
+      const footerCellOpts = Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig)
+      if (footerCellOpts.height) {
+        footerCellOpts.height = XEUtils.toNumber(footerCellOpts.height)
+      }
+      return footerCellOpts
     },
     rowOpts () {
       return this.computeRowOpts
     },
     computeRowOpts () {
-      return Object.assign({}, getConfig().table.rowConfig, this.rowConfig)
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.rowConfig, props.rowConfig)
+    },
+    computeCurrentRowOpts () {
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.currentRowConfig, props.currentRowConfig)
     },
     computeRowDragOpts () {
       return Object.assign({}, getConfig().table.rowDragConfig, this.rowDragConfig)
@@ -838,25 +860,37 @@ export default {
       return this.computeSeqOpts
     },
     computeSeqOpts () {
-      return Object.assign({ startIndex: 0 }, getConfig().table.seqConfig, this.seqConfig)
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({ startIndex: 0 }, getConfig().table.seqConfig, props.seqConfig)
     },
     radioOpts () {
       return this.computeRadioOpts
     },
     computeRadioOpts () {
-      return Object.assign({}, getConfig().table.radioConfig, this.radioConfig)
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.radioConfig, props.radioConfig)
     },
     checkboxOpts () {
       return this.computeCheckboxOpts
     },
     computeCheckboxOpts () {
-      return Object.assign({}, getConfig().table.checkboxConfig, this.checkboxConfig)
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.checkboxConfig, props.checkboxConfig)
     },
     tooltipOpts () {
       return this.computeTooltipOpts
     },
     computeTooltipOpts () {
-      return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, this.tooltipConfig)
+      const $xeTable = this
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
     },
     tipConfig () {
       return { ...this.tooltipOpts }
@@ -1071,13 +1105,16 @@ export default {
     computeTableRowExpandedList () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
 
-      const { rowExpandedMaps, tableData, expandColumn } = reactData
+      const { rowExpandedFlag, tableData, expandColumn } = reactData
+      const { rowExpandedMaps } = internalData
+      const { handleGetRowId } = createHandleGetRowId($xeTable)
       const expandList: any[] = []
-      if (expandColumn) {
+      if (expandColumn && rowExpandedFlag) {
         const rowKeys: Record<string, boolean> = {}
         tableData.forEach(row => {
-          rowKeys[getRowid($xeTable, row)] = true
+          rowKeys[handleGetRowId(row)] = true
         })
         XEUtils.each(rowExpandedMaps, (row, rowid) => {
           if (rowKeys[rowid]) {
@@ -1330,13 +1367,15 @@ export default {
       lastScrollTop: 0,
       // 单选框属性，已选中保留的行
       radioReserveRow: null,
-      // 复选框属性，已选中保留的行
+      // 复选框属性，已选中保留的行集合
       checkboxReserveRowMap: {},
-      // 行数据，已展开保留的行
+      // 行数据，已展开保留的行集合
       rowExpandedReserveRowMap: {},
-      // 树结构数据，已展开保留的行
+      // 树结构数据，已展开保留的行集合
       treeExpandedReserveRowMap: {},
-      // 完整数据、条件处理后
+      // 树结构数据，不确定状态的集合
+      treeIndeterminateRowMaps: {},
+      // 列表完整数据、条件处理后
       tableFullData: [],
       afterFullData: [],
       // 列表条件处理后数据集合
@@ -1355,6 +1394,19 @@ export default {
       fullColumnIdData: {},
       fullColumnFieldData: {},
 
+      // 已展开的行集合
+      rowExpandedMaps: {},
+      // 懒加载中的展开行的集合
+      rowExpandLazyLoadedMaps: {},
+      // 已展开树节点集合
+      treeExpandedMaps: {},
+      // 懒加载中的树节点的集合
+      treeExpandLazyLoadedMaps: {},
+      // 复选框属性，已选中的行集合
+      selectCheckboxMaps: {},
+      // 已标记的对象集
+      pendingRowMaps: {},
+
       swYSize: 0,
       swYInterval: 0,
       swYTotal: 0

package/packages/table/src/util.ts

@@ -2,6 +2,7 @@ import XEUtils from 'xe-utils'
 import { ColumnInfo } from './columnInfo'
 import { isScale, isPx } from '../../ui/src/dom'
 import { warnLog, errLog } from '../../ui/src/log'
+import { eqEmptyValue } from '../../ui/src/utils'
 
 import type { VxeTableDefines, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePrivateMethods } from '../../../types'
 
@@ -102,14 +103,71 @@ export function getRowUniqueId () {
 }
 
 // 行主键 key
-export function getRowkey ($xetable: any) {
-  return $xetable.rowOpts.keyField || $xetable.rowId || '_X_ROW_KEY'
+export function getRowkey ($xeTable: VxeTableConstructor) {
+  const props = $xeTable
+  const rowOpts = $xeTable.computeRowOpts
+  return `${props.rowId || rowOpts.keyField || '_X_ROW_KEY'}`
 }
 
 // 行主键 value
-export function getRowid ($xetable: any, row: any) {
-  const rowid = XEUtils.get(row, getRowkey($xetable))
-  return XEUtils.eqNull(rowid) ? '' : encodeURIComponent(rowid)
+export function getRowid ($xeTable: VxeTableConstructor, row: any) {
+  const rowid = XEUtils.get(row, getRowkey($xeTable))
+  return encodeRowid(rowid)
+}
+
+export function createHandleUpdateRowId ($xeTable: VxeTableConstructor) {
+  const rowKey = getRowkey($xeTable)
+  const isDeepKey = rowKey.indexOf('.') > -1
+  const updateRId = isDeepKey ? updateDeepRowKey : updateFastRowKey
+  return {
+    rowKey,
+    handleUpdateRowId (row: any) {
+      return row ? updateRId(row, rowKey) : null
+    }
+  }
+}
+
+export function createHandleGetRowId ($xeTable: VxeTableConstructor) {
+  const rowKey = getRowkey($xeTable)
+  const isDeepKey = rowKey.indexOf('.') > -1
+  const getRId = isDeepKey ? getDeepRowIdByKey : getFastRowIdByKey
+  return {
+    rowKey,
+    handleGetRowId (row: any) {
+      return row ? getRId(row, rowKey) : null
+    }
+  }
+}
+
+// 编码行主键
+export function encodeRowid (rowVal: string) {
+  return XEUtils.eqNull(rowVal) ? '' : encodeURIComponent(rowVal)
+}
+
+function getDeepRowIdByKey (row: any, rowKey: string) {
+  return XEUtils.get(row, rowKey)
+}
+
+export function updateDeepRowKey (row: any, rowKey: string) {
+  let rowid = getDeepRowIdByKey(row, rowKey)
+  if (eqEmptyValue(rowid)) {
+    rowid = getRowUniqueId()
+    XEUtils.set(row, rowKey, rowid)
+  }
+  return rowid
+}
+
+function getFastRowIdByKey (row: any, rowKey: string) {
+  return row[rowKey]
+}
+
+export function updateFastRowKey (row: any, rowKey: string) {
+  let rowid = getFastRowIdByKey(row, rowKey)
+  if (eqEmptyValue(rowid)) {
+    rowid = getRowUniqueId()
+    row[rowKey] = rowid
+  }
+  return rowid
 }
 
 function getPaddingLeftRightSize (elem: any) {
@@ -139,9 +197,17 @@ export function getCellHeight (height: number | 'unset' | undefined | null) {
   return height || 0
 }
 
-export function handleFieldOrColumn (_vm: any, fieldOrColumn: any) {
+export function handleFieldOrColumn ($xeTable: VxeTableConstructor, fieldOrColumn: any) {
   if (fieldOrColumn) {
-    return XEUtils.isString(fieldOrColumn) || XEUtils.isNumber(fieldOrColumn) ? _vm.getColumnByField(`${fieldOrColumn}`) : fieldOrColumn
+    return XEUtils.isString(fieldOrColumn) || XEUtils.isNumber(fieldOrColumn) ? $xeTable.getColumnByField(`${fieldOrColumn}`) : fieldOrColumn
+  }
+  return null
+}
+
+export const handleRowidOrRow = ($xeTable: VxeTableConstructor, rowidOrRow: any) => {
+  if (rowidOrRow) {
+    const rowid = XEUtils.isString(rowidOrRow) || XEUtils.isNumber(rowidOrRow) ? rowidOrRow : getRowid($xeTable, rowidOrRow)
+    return $xeTable.getRowById(rowid)
   }
   return null
 }