调整 row-key 与 column-key 相关参数

2026-01-21 05:27:57 +08:00 · 2022-02-16 23:24:39 +08:00
parent f56b75f3e4
commit 5ea78d1cc2
38 changed files with 155 additions and 93 deletions
--- a/examples/views/table/advanced/Expand.vue
+++ b/examples/views/table/advanced/Expand.vue
@@ -73,7 +73,7 @@

    <vxe-table
      border
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :expand-config="{expandRowKeys: [10004]}"
      :data="demo2.tableData">
      <vxe-column type="seq" width="60"></vxe-column>
--- a/examples/views/table/base/Data.vue
+++ b/examples/views/table/base/Data.vue
@@ -41,7 +41,7 @@
    <p class="tip">二维数组结构，适用场景较少<span class="red">（缺点局限性比较大，需要手动指定 <table-api-link prop="row-id"/> 唯一主键）</span></p>

    <vxe-table
-      row-id="0"
+      :row-config="{keyField: '0'}"
      :data="tableData3">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="1" title="Name"></vxe-column>
--- a/examples/views/table/base/Radio.vue
+++ b/examples/views/table/base/Radio.vue
@@ -74,7 +74,7 @@
    <vxe-table
      border
      height="300"
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :data="demo3.tableData"
      :radio-config="{checkRowKey: demo3.defaultSelecteRow3}">
      <vxe-column type="radio" width="60"></vxe-column>
--- a/examples/views/table/base/Selection.vue
+++ b/examples/views/table/base/Selection.vue
@@ -123,7 +123,7 @@
    <vxe-table
      border
      highlight-hover-row
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :data="demo5.tableData"
      :checkbox-config="{checkRowKeys: demo5.defaultSelecteRows5, highlight: true}"
      :radio-config="{labelField: 'name'}">
--- a/examples/views/table/scroll/LazyTree.vue
+++ b/examples/views/table/scroll/LazyTree.vue
@@ -9,7 +9,7 @@
      resizable
      ref="xTree1"
      height="400"
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :menu-config="demo1.tableMenu"
      :tree-config="demo1.treeConfig"
      :data="demo1.tableData"
--- a/examples/views/table/scroll/PartialLoad.vue
+++ b/examples/views/table/scroll/PartialLoad.vue
@@ -20,7 +20,7 @@
      resizable
      show-overflow
      height="500"
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :loading="demo1.loading"
      :checkbox-config="{checkField: 'checked'}">
      <vxe-column type="checkbox" width="60"></vxe-column>
--- a/examples/views/table/scroll/ScrollFullRows.vue
+++ b/examples/views/table/scroll/ScrollFullRows.vue
@@ -27,12 +27,12 @@
      border
      resizable
      show-overflow
-      row-key
      show-header-overflow
      highlight-hover-row
      highlight-current-row
      ref="xTable"
      height="600"
+      :row-config="{useKey: true}"
      :export-config="{}"
      :loading="demo1.loading"
      :sort-config="{trigger: 'cell'}"
--- a/examples/views/table/tree/Basic.vue
+++ b/examples/views/table/tree/Basic.vue
@@ -39,7 +39,7 @@

    <vxe-table
      resizable
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :tree-config="{transform: true, expandRowKeys: demo2.defaultExpandKeys}"
      :data="demo2.tableData">
      <vxe-column field="name" title="app.body.label.name" tree-node></vxe-column>
@@ -60,7 +60,7 @@
    <vxe-table
      border
      show-overflow
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :data="demo3.tableData"
      :tree-config="{transform: true, expandAll: true}">
      <vxe-column type="seq" width="180" title="序号" tree-node></vxe-column>
--- a/examples/views/table/tree/CRUD.vue
+++ b/examples/views/table/tree/CRUD.vue
@@ -16,7 +16,7 @@
      show-overflow
      keep-source
      ref="xTable"
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :print-config="{}"
      :export-config="{}"
      :loading="demo1.loading"
--- a/examples/views/table/tree/Lazy.vue
+++ b/examples/views/table/tree/Lazy.vue
@@ -19,7 +19,7 @@
      border
      resizable
      ref="xTree"
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :tree-config="{lazy: true, hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
      :data="demo1.tableData">
      <vxe-column type="seq" width="60"></vxe-column>
@@ -41,7 +41,7 @@
    <vxe-table
      border
      resizable
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :loading="demo2.loading"
      :checkbox-config="{labelField: 'name'}"
      :tree-config="demo2.tableTree"
--- a/examples/views/table/tree/LazyEdit.vue
+++ b/examples/views/table/tree/LazyEdit.vue
@@ -16,7 +16,7 @@
      resizable
      keep-source
      ref="xTree1"
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
      :tree-config="demo1.tableTree"
      :data="demo1.tableData">
--- a/examples/views/table/tree/LazyMenu.vue
+++ b/examples/views/table/tree/LazyMenu.vue
@@ -8,7 +8,7 @@
      border
      resizable
      ref="xTree1"
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :menu-config="demo1.tableMenu"
      :tree-config="demo1.treeConfig"
      :data="demo1.tableData"
--- a/examples/views/table/tree/Line.vue
+++ b/examples/views/table/tree/Line.vue
@@ -9,7 +9,7 @@
      resizable
      show-overflow
      highlight-hover-row
-      row-key
+      :row-config="{useKey: true}"
      :tree-config="{transform: true, rowField: 'id', parentField: 'parentId', line: true}"
      :data="demo1.tableData"
      :scroll-y="{enabled: false}">
@@ -33,8 +33,8 @@
      show-overflow
      highlight-hover-row
      highlight-current-row
-      row-key
      size="medium"
+      :row-config="{useKey: true}"
      :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'vxe-icon--caret-right rotate45', iconClose: 'vxe-icon--caret-right'}"
      :checkbox-config="{labelField: 'name'}"
      :data="demo2.tableData"
@@ -58,8 +58,8 @@
      resizable
      show-overflow
      highlight-hover-row
-      row-key
      size="small"
+      :row-config="{useKey: true}"
      :radio-config="{labelField: 'name'}"
      :tree-config="{accordion: true, line: true, iconOpen: 'vxe-icon--remove', iconClose: 'vxe-icon--circle-plus'}"
      :data="demo3.tableData"
@@ -83,9 +83,9 @@
      resizable
      show-overflow
      highlight-hover-row
-      row-key
      ref="xTree"
      size="mini"
+      :row-config="{useKey: true}"
      :checkbox-config="{labelField: 'name'}"
      :tree-config="{line: true, iconOpen: 'vxe-icon--remove', iconClose: 'vxe-icon--circle-plus'}"
      :data="demo4.tableData"
--- a/examples/views/table/tree/Normal.vue
+++ b/examples/views/table/tree/Normal.vue
@@ -35,7 +35,7 @@
    <vxe-table
      show-overflow
      highlight-hover-row
-      row-key
+      :row-config="{useKey: true}"
      :show-header="false"
      :data="demo2.tableData"
      :checkbox-config="{labelField: 'name'}"
@@ -55,9 +55,9 @@
    <vxe-table
      show-overflow
      highlight-hover-row
-      row-key
      ref="xTree3"
      border="inner"
+      :row-config="{useKey: true}"
      :show-header="false"
      :data="demo3.tableData"
      :checkbox-config="{labelField: 'name'}"
--- a/examples/views/table/tree/Selection.vue
+++ b/examples/views/table/tree/Selection.vue
@@ -28,7 +28,7 @@

    <vxe-table
      resizable
-      row-id="id"
+      :row-config="{keyField: 'id'}"
      :data="demo2.tableData"
      :tree-config="{transform: true}"
      :checkbox-config="{labelField: 'name', checkRowKeys: [10053, 23666]}"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "4.1.21",
+  "version": "4.2.0-beta.0",
  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
  "scripts": {
    "serve": "vue-cli-service serve",
--- a/packages/edit/src/hook.ts
+++ b/packages/edit/src/hook.ts
@@ -1,9 +1,10 @@
 import { nextTick } from 'vue'
 import XEUtils from 'xe-utils'
 import { renderer } from '../../v-x-e-table'
-import { errLog, getLog, isEnableConf, warnLog } from '../../tools/utils'
+import { isEnableConf } from '../../tools/utils'
 import { getCellValue, setCellValue, getRowid } from '../../table/src/util'
 import { browse, removeClass, addClass } from '../../tools/dom'
+import { warnLog, errLog, getLog } from '../../tools/log'

 import { VxeGlobalHooksHandles, TableEditMethods, TableEditPrivateMethods } from '../../../types/all'

--- a/packages/export/src/hook.ts
+++ b/packages/export/src/hook.ts
@@ -3,7 +3,8 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import { isColumnInfo, mergeBodyMethod, getCellValue } from '../../table/src/util'
-import { errLog, warnLog, parseFile, formatText } from '../../tools/utils'
+import { parseFile, formatText } from '../../tools/utils'
+import { warnLog, errLog } from '../../tools/log'
 import { readLocalFile, handlePrint, saveLocalFile, createHtmlPage, getExportBlobByContent } from './util'

 import { VxeGlobalHooksHandles, VxeGridConstructor, VxeGridPrivateMethods, TableExportMethods } from '../../../types/all'
--- a/packages/export/src/util.ts
+++ b/packages/export/src/util.ts
@@ -2,7 +2,8 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import { browse } from '../../tools/dom'
-import { getLog, parseFile, errLog } from '../../tools/utils'
+import { parseFile } from '../../tools/utils'
+import { errLog, getLog } from '../../tools/log'

 import { VxeTablePropTypes, SaveFileFunction, ReadFileFunction, VxeTableConstructor } from '../../../types/all'

@@ -22,11 +23,8 @@ export function createFrame (): HTMLIFrameElement {
  return frame
 }

-export function getExportBlobByContent (content: string, options: { type: string }): Blob | null {
-  if (window.Blob) {
-    return new Blob([content], { type: `text/${options.type};charset=utf-8;` })
-  }
-  return null
+export function getExportBlobByContent (content: string, options: { type: string }) {
+  return new Blob([content], { type: `text/${options.type};charset=utf-8;` })
 }

 export function createHtmlPage (opts: VxeTablePropTypes.PrintConfig, content: string): string {
--- a/packages/footer/src/footer.ts
+++ b/packages/footer/src/footer.ts
@@ -34,7 +34,7 @@ export default defineComponent({

    const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xetable
    const { refTableHeader, refTableBody, refValidTooltip } = $xetable.getRefMaps()
-    const { computeTooltipOpts } = $xetable.getComputeMaps()
+    const { computeTooltipOpts, computeColumnOpts } = $xetable.getComputeMaps()

    const refElem = ref() as Ref<HTMLDivElement>
    const refFooterTable = ref() as Ref<HTMLTableElement>
@@ -106,6 +106,7 @@ export default defineComponent({
      const { visibleColumn } = tableInternalData
      const { scrollYLoad, overflowX, scrollbarWidth, currentColumn, mergeFooterList } = tableReactData
      const tooltipOpts = computeTooltipOpts.value
+      const columnOpts = computeColumnOpts.value
      // 如果是使用优化模式
      if (fixedType) {
        if (scrollYLoad || allColumnFooterOverflow) {
@@ -244,7 +245,7 @@ export default defineComponent({
                ...attrs,
                style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(params) : footerCellStyle) : null,
                ...tfOns,
-                key: columnKey ? column.id : $columnIndex
+                key: columnKey || columnOpts.useKey ? column.id : $columnIndex
              }, [
                h('div', {
                  class: ['vxe-cell', {
--- a/packages/form/src/form-gather.ts
+++ b/packages/form/src/form-gather.ts
@@ -1,5 +1,5 @@
 import { defineComponent, h, onUnmounted, inject, ref, Ref, reactive, onMounted, provide, nextTick } from 'vue'
-import { errLog } from '../../tools/utils'
+import { errLog } from '../../tools/log'
 import { createItem, watchItem, destroyItem, assemItem, XEFormItemProvide } from './util'
 import { formItemProps } from './form-item'

--- a/packages/form/src/form.ts
+++ b/packages/form/src/form.ts
@@ -2,7 +2,8 @@ import { defineComponent, h, ref, Ref, resolveComponent, ComponentOptions, Compu
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
-import { errLog, getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils'
+import { getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils'
+import { errLog } from '../../tools/log'
 import { scrollToView } from '../../tools/dom'
 import { createItem, handleFieldOrItem } from './util'
 import { renderTitle } from './render'
--- a/packages/grid/src/grid.ts
+++ b/packages/grid/src/grid.ts
@@ -1,7 +1,8 @@
 import { defineComponent, h, PropType, ref, Ref, computed, provide, getCurrentInstance, resolveComponent, ComponentOptions, reactive, onUnmounted, watch, nextTick, VNode, ComponentPublicInstance, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { errLog, getLastZIndex, nextZIndex, isEnableConf } from '../../tools/utils'
+import { getLastZIndex, nextZIndex, isEnableConf } from '../../tools/utils'
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode } from '../../tools/dom'
+import { errLog } from '../../tools/log'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import tableComponentProps from '../../table/src/props'
--- a/packages/header/src/header.ts
+++ b/packages/header/src/header.ts
@@ -263,7 +263,7 @@ export default defineComponent({
                rowspan: column.rowSpan > 1 ? column.rowSpan : null,
                style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
                ...thOns,
-                key: columnKey || isColGroup ? column.id : $columnIndex
+                key: columnKey || columnOpts.useKey || isColGroup ? column.id : $columnIndex
              }, [
                h('div', {
                  class: ['vxe-cell', {
--- a/packages/modal/src/modal.ts
+++ b/packages/modal/src/modal.ts
@@ -2,7 +2,8 @@ import { defineComponent, h, Teleport, ref, Ref, computed, reactive, nextTick, w
 import XEUtils from 'xe-utils'
 import { useSize } from '../../hooks/size'
 import { getDomNode, getEventTargetNode } from '../../tools/dom'
-import { errLog, getLastZIndex, nextZIndex, getFuncText } from '../../tools/utils'
+import { getLastZIndex, nextZIndex, getFuncText } from '../../tools/utils'
+import { errLog } from '../../tools/log'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VxeButtonConstructor from '../../button/src/button'
--- a/packages/table/src/body.ts
+++ b/packages/table/src/body.ts
@@ -3,7 +3,7 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import { mergeBodyMethod, getRowid, getPropClass, removeScrollListener, restoreScrollListener, XEBodyScrollElement } from './util'
-import { updateCellTitle, setScrollTop } from '../../tools/dom'
+import { updateCellTitle } from '../../tools/dom'
 import { isEnableConf } from '../../tools/utils'

 import { VxeTablePrivateMethods, VxeTableConstructor, VxeTableDefines, VxeTableMethods, VxeGlobalRendererHandles, VxeColumnPropTypes, SizeType } from '../../../types/all'
@@ -31,7 +31,7 @@ export default defineComponent({

    const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xetable
    const { refTableHeader, refTableBody, refTableFooter, refTableLeftBody, refTableRightBody, refValidTooltip } = $xetable.getRefMaps()
-    const { computeEditOpts, computeMouseOpts, computeSYOpts, computeEmptyOpts, computeKeyboardOpts, computeTooltipOpts, computeRadioOpts, computeTreeOpts, computeCheckboxOpts, computeValidOpts, computeRowOpts } = $xetable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeSYOpts, computeEmptyOpts, computeKeyboardOpts, computeTooltipOpts, computeRadioOpts, computeTreeOpts, computeCheckboxOpts, computeValidOpts, computeRowOpts, computeColumnOpts } = $xetable.getComputeMaps()

    const refElem = ref() as Ref<XEBodyScrollElement>
    const refBodyTable = ref() as Ref<HTMLTableElement>
@@ -131,6 +131,7 @@ export default defineComponent({
      const tooltipOpts = computeTooltipOpts.value
      const rowOpts = computeRowOpts.value
      const sYOpts = computeSYOpts.value
+      const columnOpts = computeColumnOpts.value
      const { type, cellRender, editRender, align, showOverflow, className, treeNode } = column
      const { actived } = editStore
      const { rHeight: scrollYRHeight } = sYOpts
@@ -295,7 +296,7 @@ export default defineComponent({
          'col--valid-error': hasValidError,
          'col--current': currentColumn === column
        }, getPropClass(className, params), getPropClass(cellClassName, params)],
-        key: columnKey ? column.id : $columnIndex,
+        key: columnKey || columnOpts.useKey ? column.id : $columnIndex,
        ...attrs,
        style: Object.assign({
          height: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : ''
@@ -362,7 +363,7 @@ export default defineComponent({
            }, rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''],
            rowid: rowid,
            style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-            key: rowKey || treeConfig ? rowid : $rowIndex,
+            key: (rowKey || rowOpts.useKey) || treeConfig ? rowid : $rowIndex,
            ...trOn
          }, tableColumn.map((column: any, $columnIndex: any) => {
            return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
@@ -430,28 +431,28 @@ export default defineComponent({
        }
        clearTimeout(scrollProcessTimeout)
        scrollProcessTimeout = setTimeout(() => {
-          const tableBody = refTableBody.value
-          const leftBody = refTableLeftBody.value
-          const rightBody = refTableRightBody.value
-          const bodyElem = tableBody.$el as XEBodyScrollElement
-          const leftElem = leftBody ? leftBody.$el as XEBodyScrollElement : null
-          const rightElem = rightBody ? rightBody.$el as XEBodyScrollElement : null
+          // const tableBody = refTableBody.value
+          // const leftBody = refTableLeftBody.value
+          // const rightBody = refTableRightBody.value
+          // const bodyElem = tableBody.$el as XEBodyScrollElement
+          // const leftElem = leftBody ? leftBody.$el as XEBodyScrollElement : null
+          // const rightElem = rightBody ? rightBody.$el as XEBodyScrollElement : null
          restoreScrollListener(elem1)
          restoreScrollListener(elem2)
          // 检查滚动条是的同步
-          let targetTop = bodyElem.scrollTop
-          if (fixedType === 'left') {
-            if (leftElem) {
-              targetTop = leftElem.scrollTop
-            }
-          } else if (fixedType === 'right') {
-            if (rightElem) {
-              targetTop = rightElem.scrollTop
-            }
-          }
-          setScrollTop(bodyElem, targetTop)
-          setScrollTop(leftElem, targetTop)
-          setScrollTop(rightElem, targetTop)
+          // let targetTop = bodyElem.scrollTop
+          // if (fixedType === 'left') {
+          //   if (leftElem) {
+          //     targetTop = leftElem.scrollTop
+          //   }
+          // } else if (fixedType === 'right') {
+          //   if (rightElem) {
+          //     targetTop = rightElem.scrollTop
+          //   }
+          // }
+          // setScrollTop(bodyElem, targetTop)
+          // setScrollTop(leftElem, targetTop)
+          // setScrollTop(rightElem, targetTop)
        }, 300)
      }
    }
--- a/packages/table/src/columnInfo.ts
+++ b/packages/table/src/columnInfo.ts
@@ -2,7 +2,8 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import { toFilters } from './util'
-import { warnLog, errLog, getFuncText } from '../../tools/utils'
+import { getFuncText } from '../../tools/utils'
+import { warnLog, errLog } from '../../tools/log'

 import { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/all'

@@ -143,10 +144,10 @@ export class ColumnInfo {
    // 不支持双向的属性
    if (name !== 'filters') {
      if (name === 'field') {
+        // 兼容旧属性
        this.property = value
-      } else {
-        this[name] = value
      }
+      this[name] = value
    }
  }

--- a/packages/table/src/props.ts
+++ b/packages/table/src/props.ts
@@ -12,7 +12,7 @@ export default {
  height: [Number, String] as PropType<VxeTablePropTypes.Height>,
  // 表格的最大高度
  maxHeight: [Number, String] as PropType<VxeTablePropTypes.MaxHeight>,
-  // 所有列是否允许拖动列宽调整大小
+  // （即将废弃）所有列是否允许拖动列宽调整大小
  resizable: { type: Boolean as PropType<VxeTablePropTypes.Resizable>, default: () => GlobalConfig.table.resizable },
  // 是否带有斑马纹
  stripe: { type: Boolean as PropType<VxeTablePropTypes.Stripe>, default: () => GlobalConfig.table.stripe },
@@ -88,9 +88,11 @@ export default {
  showFooterOverflow: { type: [Boolean, String] as PropType<VxeTablePropTypes.ShowFooterOverflow>, default: () => GlobalConfig.table.showFooterOverflow },

  /** 高级属性 */
-  // 主键配置
+  // （即将废弃）columnKey 已废弃，被 column-config.useKey 替换
  columnKey: Boolean as PropType<VxeTablePropTypes.ColumnKey>,
+  // （即将废弃）rowKey 已废弃，被 row-config.useKey 替换
  rowKey: Boolean as PropType<VxeTablePropTypes.RowKey>,
+  // （即将废弃）rowId 已废弃，被 row-config.keyField 替换
  rowId: { type: String as PropType<VxeTablePropTypes.RowId>, default: () => GlobalConfig.table.rowId },
  zIndex: Number as PropType<VxeTablePropTypes.ZIndex>,
  emptyText: { type: String as PropType<VxeTablePropTypes.EmptyText>, default: () => GlobalConfig.table.emptyText },
@@ -155,6 +157,7 @@ export default {
  scrollY: Object as PropType<VxeTablePropTypes.ScrollY>,
  // （即将废弃）优化相关
  animat: { type: Boolean as PropType<VxeTablePropTypes.Animat>, default: () => GlobalConfig.table.animat },
+  // （可能会被废弃的参数，不要使用）
  delayHover: { type: Number as PropType<VxeTablePropTypes.DelayHover>, default: () => GlobalConfig.table.delayHover as number },
  // 额外的参数
  params: Object as PropType<VxeTablePropTypes.Params>
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -1,7 +1,8 @@
 import { defineComponent, getCurrentInstance, h, createCommentVNode, ComponentPublicInstance, resolveComponent, ComponentOptions, reactive, ref, Ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, ComputedRef, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
 import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../tools/dom'
-import { warnLog, errLog, getLog, getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../tools/utils'
+import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../tools/utils'
+import { warnLog, errLog, getLog } from '../../tools/log'
 import { createResizeEvent, XEResizeObserver } from '../../tools/resize'
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event'
 import { useSize } from '../../hooks/size'
@@ -5718,16 +5719,26 @@ export default defineComponent({
        const radioOpts = computeRadioOpts.value
        const checkboxOpts = computeCheckboxOpts.value
        const expandOpts = computeExpandOpts.value
+        const rowOpts = computeRowOpts.value

        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-          if (!props.rowId && (checkboxOpts.reserve || checkboxOpts.checkRowKeys || radioOpts.reserve || radioOpts.checkRowKey || expandOpts.expandRowKeys || treeOpts.expandRowKeys)) {
-            warnLog('vxe.error.reqProp', ['row-id'])
+          // if (props.rowId) {
+          //   warnLog('vxe.error.delProp', ['rowId', 'row-config.keyField'])
+          // }
+          // if (props.rowKey) {
+          //   warnLog('vxe.error.delProp', ['rowId', 'row-config.useKey'])
+          // }
+          // if (props.columnKey) {
+          //   warnLog('vxe.error.delProp', ['rowId', 'column-config.useKey'])
+          // }
+          if (!(props.rowId || rowOpts.keyField) && (checkboxOpts.reserve || checkboxOpts.checkRowKeys || radioOpts.reserve || radioOpts.checkRowKey || expandOpts.expandRowKeys || treeOpts.expandRowKeys)) {
+            warnLog('vxe.error.reqProp', ['row-config.keyField'])
          }
          if (props.editConfig && (editOpts.showStatus || editOpts.showUpdateStatus || editOpts.showInsertStatus) && !props.keepSource) {
            warnLog('vxe.error.reqProp', ['keep-source'])
          }
-          if (treeConfig && treeOpts.line && (!props.rowKey || !showOverflow)) {
-            warnLog('vxe.error.reqProp', ['row-key | show-overflow'])
+          if (treeConfig && treeOpts.line && (!props.rowKey || !rowOpts.useKey || !showOverflow)) {
+            warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow'])
          }
          if (treeConfig && props.stripe) {
            warnLog('vxe.error.noTree', ['stripe'])
--- a/packages/table/src/util.ts
+++ b/packages/table/src/util.ts
@@ -44,14 +44,16 @@ export function getRowUniqueId () {
 // 行主键 key
 export function getRowkey ($xetable: VxeTableConstructor) {
  const { props } = $xetable
+  const { computeRowOpts } = $xetable.getComputeMaps()
  const { rowId } = props
-  return rowId || '_X_ID'
+  const rowOpts = computeRowOpts.value
+  return rowId || rowOpts.keyField || '_X_ID'
 }

 // 行主键 value
 export function getRowid ($xetable: VxeTableConstructor, row: any) {
-  const rowId = XEUtils.get(row, getRowkey($xetable))
-  return XEUtils.eqNull(rowId) ? '' : encodeURIComponent(rowId)
+  const rowid = XEUtils.get(row, getRowkey($xetable))
+  return XEUtils.eqNull(rowid) ? '' : encodeURIComponent(rowid)
 }

 export interface XEColumnInstance {
--- a/packages/toolbar/src/toolbar.ts
+++ b/packages/toolbar/src/toolbar.ts
@@ -4,7 +4,8 @@ import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import { useSize } from '../../hooks/size'
 import { getEventTargetNode } from '../../tools/dom'
-import { warnLog, errLog, formatText } from '../../tools/utils'
+import { formatText } from '../../tools/utils'
+import { warnLog, errLog } from '../../tools/log'
 import { GlobalEvent } from '../../tools/event'

 import { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData, VxeTableDefines } from '../../../types/all'
--- a/packages/tools/log.ts
+++ b/packages/tools/log.ts
@@ -0,0 +1,16 @@
+import GlobalConfig from '../v-x-e-table/src/conf'
+
+export function getLog (message: string, params?: any) {
+  return `[vxe-table v${process.env.VUE_APP_VXE_TABLE_VERSION}] ${GlobalConfig.i18n(message, params)}`
+}
+
+function outLog (type: 'log' | 'warn' | 'error') {
+  return function (message: string, params?: any) {
+    const msg = getLog(message, params)
+    console[type](msg)
+    return msg
+  }
+}
+
+export const warnLog = outLog('warn')
+export const errLog = outLog('error')
--- a/packages/tools/utils.ts
+++ b/packages/tools/utils.ts
@@ -4,18 +4,6 @@ import GlobalConfig from '../v-x-e-table/src/conf'
 let zindexIndex = 0
 let lastZindex = 1

-export function getLog (message: string, params?: any) {
-  return `[vxe-table v${process.env.VUE_APP_VXE_TABLE_VERSION}] ${GlobalConfig.i18n(message, params)}`
-}
-
-function outLog (type: 'log' | 'warn' | 'error') {
-  return function (message: string, params?: any) {
-    const msg = getLog(message, params)
-    console[type](msg)
-    return msg
-  }
-}
-
 export function isEnableConf (conf: any): boolean {
  return conf && conf.enabled !== false
 }
@@ -41,9 +29,6 @@ export function getLastZIndex () {
  return lastZindex
 }

-export const warnLog = outLog('warn')
-export const errLog = outLog('error')
-
 export function hasChildrenList (item: any) {
  return item && item.children && item.children.length > 0
 }
--- a/packages/v-x-e-table/src/conf.ts
+++ b/packages/v-x-e-table/src/conf.ts
@@ -28,6 +28,9 @@ const GlobalConfig: VXETableGlobalConfig = {
    // emptyRender: {
    //   name: ''
    // },
+    // rowConfig: {
+    //   keyField: '_X_ID' // 行数据的唯一主键字段名
+    // },
    radioConfig: {
      // trigger: 'default'
      strict: true
@@ -51,7 +54,6 @@ const GlobalConfig: VXETableGlobalConfig = {
    //  storage: false,
    //  checkMethod () {}
    // },
-    // rowId: '_X_ID', // 行数据的唯一主键字段名
    sortConfig: {
      // remote: false,
      // trigger: 'default',
--- a/packages/v-x-e-table/src/interceptor.ts
+++ b/packages/v-x-e-table/src/interceptor.ts
@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils'
-import { warnLog } from '../../tools/utils'
+import { warnLog } from '../../tools/log'

 import { VxeGlobalInterceptor, VxeGlobalInterceptorHandles } from '../../../types/v-x-e-table'

--- a/packages/v-x-e-table/src/renderer.ts
+++ b/packages/v-x-e-table/src/renderer.ts
@@ -2,7 +2,8 @@ import { h, resolveComponent, ComponentOptions } from 'vue'
 import XEUtils from 'xe-utils'
 import GlobalConfig from './conf'
 import { getCellValue, setCellValue } from '../../table/src/util'
-import { warnLog, getFuncText, formatText, isEmptyValue } from '../../tools/utils'
+import { getFuncText, formatText, isEmptyValue } from '../../tools/utils'
+import { warnLog } from '../../tools/log'
 import { getOnName } from '../../tools/vn'

 import { VxeGlobalRendererHandles, VxeGlobalRenderer, VxeColumnPropTypes } from '../../../types/all'
--- a/packages/v-x-e-table/src/store.ts
+++ b/packages/v-x-e-table/src/store.ts
@@ -1,4 +1,4 @@
-import { warnLog } from '../../tools/utils'
+import { warnLog } from '../../tools/log'
 import XEUtils from 'xe-utils'

 /**
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -1223,6 +1223,7 @@ export namespace VxeTablePropTypes {
   * 列配置信息
   */
  export interface ColumnConfig {
+    useKey?: boolean;
    isCurrent?: boolean;
    isHover?: boolean;
    resizable?: VxeColumnPropTypes.Resizable;
@@ -1235,6 +1236,8 @@ export namespace VxeTablePropTypes {
   * 行配置信息
   */
  export interface RowConfig {
+    useKey?: boolean;
+    keyField?: string;
    isCurrent?: boolean;
    isHover?: boolean;
    height?: number;
@@ -1939,6 +1942,10 @@ export type VxeTableProps<D = any> = {
  data?: VxeTablePropTypes.Data<D>;
  height?: VxeTablePropTypes.Height;
  maxHeight?: VxeTablePropTypes.MaxHeight;
+  /**
+   * 不建议使用，后续废弃
+   * @deprecated
+   */
  resizable?: VxeTablePropTypes.Resizable;
  stripe?: VxeTablePropTypes.Stripe;
  round?: VxeTablePropTypes.Round;
@@ -1952,6 +1959,10 @@ export type VxeTableProps<D = any> = {
  highlightHoverRow?: VxeTablePropTypes.HighlightHoverRow;
  highlightCurrentColumn?: VxeTablePropTypes.HighlightCurrentColumn;
  highlightHoverColumn?: VxeTablePropTypes.HighlightHoverColumn;
+  /**
+   * 已废弃
+   * @deprecated
+   */
  highlightCell?: VxeTablePropTypes.HighlightCell;
  showFooter?: VxeTablePropTypes.ShowFooter;
  footerMethod?: VxeTablePropTypes.FooterMethod;
@@ -1974,8 +1985,20 @@ export type VxeTableProps<D = any> = {
  showOverflow?: VxeTablePropTypes.ShowOverflow;
  showHeaderOverflow?: VxeTablePropTypes.ShowHeaderOverflow;
  showFooterOverflow?: VxeTablePropTypes.ShowFooterOverflow;
+  /**
+   * 请使用 column-config.useKey
+   * @deprecated
+   */
  columnKey?: VxeTablePropTypes.ColumnKey;
+  /**
+   * 请使用 row-config.useKey
+   * @deprecated
+   */
  rowKey?: VxeTablePropTypes.RowKey;
+  /**
+   * 请使用 row-config.keyField
+   * @deprecated
+   */
  rowId?: VxeTablePropTypes.RowId;
  keepSource?: VxeTablePropTypes.KeepSource;
  autoResize?: VxeTablePropTypes.AutoResize;
@@ -2006,8 +2029,20 @@ export type VxeTableProps<D = any> = {
  editRules?: VxeTablePropTypes.EditRules;
  emptyText?: VxeTablePropTypes.EmptyText;
  emptyRender?: VxeTablePropTypes.EmptyRender;
+  /**
+   * 不建议使用，后续废弃
+   * @deprecated
+   */
  fit?: VxeTablePropTypes.Fit;
+  /**
+   * 不建议使用，后续废弃
+   * @deprecated
+   */
  animat?: VxeTablePropTypes.Animat;
+  /**
+   * 不建议使用，后续废弃
+   * @deprecated
+   */
  delayHover?: VxeTablePropTypes.DelayHover;
  scrollX?: VxeTablePropTypes.ScrollX;
  scrollY?: VxeTablePropTypes.ScrollY;