vxe-table 3.14.0-beta.9 → 3.14.0

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'
@@ -34,14 +34,15 @@ const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globa
  * 渲染浮固定列
  * 分别渲染左边固定列和右边固定列
  * 如果宽度足够情况下，则不需要渲染固定列
- * @param {Function} h 创建 VNode 函数
- * @param {Object} $xetable 表格实例
- * @param {String} fixedType 固定列类型
  */
-function renderFixed (h: CreateElement, $xetable: any, fixedType: any) {
-  const { _e, tableData, tableColumn, tableGroupColumn, vSize, showHeader, showFooter, columnStore, footerTableData } = $xetable
+function renderFixed (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods, fixedType: any) {
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+
+  const { showHeader, showFooter } = props
+  const { tableData, tableColumn, tableGroupColumn, columnStore, footerTableData } = reactData
   const isFixedLeft = fixedType === 'left'
-  const fixedColumn = columnStore[`${fixedType}List`]
+  const fixedColumn = isFixedLeft ? columnStore.leftList : columnStore.rightList
   return h('div', {
     ref: isFixedLeft ? 'refLeftContainer' : 'refRightContainer',
     class: `vxe-table--fixed-${fixedType}-wrapper`
@@ -53,19 +54,17 @@ function renderFixed (h: CreateElement, $xetable: any, fixedType: any) {
           tableData,
           tableColumn,
           tableGroupColumn,
-          size: vSize,
           fixedColumn
         },
         ref: `${fixedType}Header`
       })
-      : _e(),
+      : renderEmptyElement($xeTable),
     h(TableBodyComponent, {
       props: {
         fixedType,
         tableData,
         tableColumn,
-        fixedColumn,
-        size: vSize
+        fixedColumn
       },
       ref: `${fixedType}Body`
     }),
@@ -75,12 +74,11 @@ function renderFixed (h: CreateElement, $xetable: any, fixedType: any) {
           footerTableData,
           tableColumn,
           fixedColumn,
-          fixedType,
-          size: vSize
+          fixedType
         },
         ref: `${fixedType}Footer`
       })
-      : _e()
+      : renderEmptyElement($xeTable)
   ])
 }
 
@@ -209,6 +207,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 +215,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
@@ -419,7 +418,6 @@ export default {
   props: tableProps,
   provide () {
     return {
-      $xetable: this,
       $xeTable: this,
       xecolgroup: null
     }
@@ -430,9 +428,6 @@ export default {
     },
     $xeGrid: {
       default: null
-    },
-    $xegrid: {
-      default: null
     }
   },
   data () {
@@ -471,8 +466,6 @@ export default {
       isAllSelected: false,
       // 复选框属性，有选中且非全选状态
       isIndeterminate: false,
-      // 复选框属性，已选中的行集合
-      selectCheckboxMaps: {},
       // 当前行
       currentRow: null,
       // 单选框属性，选中列
@@ -486,16 +479,6 @@ export default {
       hasFixedColumn: false,
       // 树节点列信息
       treeNodeColumn: null,
-      // 已展开的行集合
-      rowExpandedMaps: {},
-      // 懒加载中的展开行的集合
-      rowExpandLazyLoadedMaps: {},
-      // 已展开树节点集合
-      treeExpandedMaps: {},
-      // 懒加载中的树节点的集合
-      treeExpandLazyLoadedMaps: {},
-      // 树节点不确定状态的集合
-      treeIndeterminateMaps: {},
       // 合并单元格的对象集
       mergeList: [],
       // 合并表尾数据的对象集
@@ -512,8 +495,6 @@ export default {
       upDataFlag: 0,
       // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
       reColumnFlag: 0,
-      // 已标记的对象集
-      pendingRowMaps: {},
       // 自定义列相关的信息
       customStore: {
         btnEl: null,
@@ -649,6 +630,11 @@ export default {
         isFooter: false
       },
 
+      rowExpandedFlag: 1,
+      treeExpandedFlag: 1,
+      updateCheckboxFlag: 1,
+      pendingRowFlag: 1,
+
       rowHeightStore: {
         default: 48,
         medium: 44,
@@ -667,6 +653,7 @@ export default {
       rowExpandHeightFlag: 1,
       calcCellHeightFlag: 1,
       resizeHeightFlag: 1,
+      resizeWidthFlag: 1,
 
       isCustomStatus: false,
 
@@ -774,13 +761,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 +777,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 +855,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 +1100,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 +1362,15 @@ export default {
       lastScrollTop: 0,
       // 单选框属性，已选中保留的行
       radioReserveRow: null,
-      // 复选框属性，已选中保留的行
+      // 复选框属性，已选中保留的行集合
       checkboxReserveRowMap: {},
-      // 行数据，已展开保留的行
+      // 行数据，已展开保留的行集合
       rowExpandedReserveRowMap: {},
-      // 树结构数据，已展开保留的行
+      // 树结构数据，已展开保留的行集合
       treeExpandedReserveRowMap: {},
-      // 完整数据、条件处理后
+      // 树结构数据，不确定状态的集合
+      treeIndeterminateRowMaps: {},
+      // 列表完整数据、条件处理后
       tableFullData: [],
       afterFullData: [],
       // 列表条件处理后数据集合
@@ -1355,6 +1389,19 @@ export default {
       fullColumnIdData: {},
       fullColumnFieldData: {},
 
+      // 已展开的行集合
+      rowExpandedMaps: {},
+      // 懒加载中的展开行的集合
+      rowExpandLazyLoadedMaps: {},
+      // 已展开树节点集合
+      treeExpandedMaps: {},
+      // 懒加载中的树节点的集合
+      treeExpandLazyLoadedMaps: {},
+      // 复选框属性，已选中的行集合
+      selectCheckboxMaps: {},
+      // 已标记的对象集
+      pendingRowMaps: {},
+
       swYSize: 0,
       swYInterval: 0,
       swYTotal: 0

package/packages/table/src/util.ts

@@ -103,37 +103,69 @@ export function getRowUniqueId () {
 }
 
 // 行主键 key
-export function getRowkey ($xeTable: any) {
+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))
+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)
 }
 
-export function updateDeepRowKey (row: any, rowkey: string) {
-  let rowid = XEUtils.get(row, rowkey)
+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)
+    XEUtils.set(row, rowKey, rowid)
   }
   return rowid
 }
 
-export function updateFastRowKey (row: any, rowkey: string) {
-  let rowid = row[rowkey]
+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
+    row[rowKey] = rowid
   }
   return rowid
 }
@@ -182,34 +214,44 @@ export const handleRowidOrRow = ($xeTable: VxeTableConstructor, rowidOrRow: any)
 
 // 组装列配置
 export function assembleColumn (_vm: any) {
-  const { $el, $xetable, $xecolumn, columnConfig } = _vm
-  const groupConfig = $xecolumn ? $xecolumn.columnConfig : null
+  const $xeTable = _vm.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+  const reactData = $xeTable as unknown as TableReactData
+  const { staticColumns } = reactData
+
+  const { $el, $xeColumn, columnConfig } = _vm
+  const groupConfig = $xeColumn ? $xeColumn.columnConfig : null
   if (groupConfig) {
-    if ($xecolumn.$options._componentTag === 'vxe-table-column') {
-      errLog('vxe.error.groupTag', [`<vxe-table-colgroup title=${$xecolumn.title} ...>`, `<vxe-table-column title=${$xecolumn.title} ...>`])
-    } else if ($xecolumn.$options._componentTag === 'vxe-column') {
-      warnLog('vxe.error.groupTag', [`<vxe-colgroup title=${$xecolumn.title} ...>`, `<vxe-column title=${$xecolumn.title} ...>`])
+    if ($xeColumn.$options._componentTag === 'vxe-table-column') {
+      errLog('vxe.error.groupTag', [`<vxe-table-colgroup title=${$xeColumn.title} ...>`, `<vxe-table-column title=${$xeColumn.title} ...>`])
+    } else if ($xeColumn.$options._componentTag === 'vxe-column') {
+      warnLog('vxe.error.groupTag', [`<vxe-colgroup title=${$xeColumn.title} ...>`, `<vxe-column title=${$xeColumn.title} ...>`])
     }
     if (!groupConfig.children) {
       groupConfig.children = []
     }
-    groupConfig.children.splice(XEUtils.arrayIndexOf($xecolumn.$el.children, $el), 0, columnConfig)
+    groupConfig.children.splice(XEUtils.arrayIndexOf($xeColumn.$el.children, $el), 0, columnConfig)
   } else {
-    $xetable.staticColumns.splice(XEUtils.arrayIndexOf($xetable.$refs.hideColumn.children, $el), 0, columnConfig)
+    staticColumns.splice(XEUtils.arrayIndexOf(($xeTable.$refs.hideColumn as any).children, $el), 0, columnConfig)
   }
 }
 
 // 销毁列
 export function destroyColumn (_vm: any) {
-  const { $xetable, columnConfig } = _vm
-  const matchObj = XEUtils.findTree($xetable.staticColumns, column => column === columnConfig)
+  const $xeTable = _vm.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+  const reactData = $xeTable as unknown as TableReactData
+  const { staticColumns } = reactData
+
+  const { columnConfig } = _vm
+  const matchObj = XEUtils.findTree(staticColumns, column => column === columnConfig)
   if (matchObj) {
     matchObj.items.splice(matchObj.index, 1)
   }
 }
 
-export function getRootColumn ($xetable: any, column: any) {
-  const fullColumnIdData = $xetable.fullColumnIdData
+export function getRootColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, column: any) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { fullColumnIdData } = internalData
   if (!column) {
     return null
   }

package/packages/toolbar/src/toolbar.ts

@@ -719,13 +719,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
     $xeToolbar.$nextTick(() => {
       const { refresh } = props
       const refreshOpts = $xeToolbar.computeRefreshOpts
-      const $xetable = this.fintTable() as any
+      const $xeTable = this.fintTable() as any
       const queryMethod = refreshOpts.queryMethod || refreshOpts.query
       if (refresh && !$xeGrid && !queryMethod) {
         warnLog('vxe.error.notFunc', ['queryMethod'])
       }
-      if ($xetable) {
-        $xetable.connect(this)
+      if ($xeTable) {
+        $xeTable.connect(this)
       }
       const customOpts = $xeToolbar.computeCustomOpts
       if (customOpts.isFooter) {

package/packages/ui/index.ts

@@ -130,6 +130,7 @@ VxeUI.setConfig({
       // remote: false,
       // filterMethod: null,
       // destroyOnClose: false,
+      // isEvery: false,
       showIcon: true
     },
     treeConfig: {