diff --git a/examples/App.vue b/examples/App.vue
index 68b64cf904..fab6a6f5be 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -22,7 +22,10 @@ const navList = ref([
   { name: 'TableTest1', routerLink: { name: 'TableTest1' } },
   { name: 'TableTest2', routerLink: { name: 'TableTest2' } },
   { name: 'TableTest3', routerLink: { name: 'TableTest3' } },
-  { name: 'GridTest', routerLink: { name: 'GridTest' } }
+  { name: 'GridTest', routerLink: { name: 'GridTest' } },
+  { name: 'TestKeepTest1', routerLink: { name: 'TestKeepTest1' } },
+  { name: 'TestKeepTest2', routerLink: { name: 'TestKeepTest2' } },
+  { name: 'TestKeepTest3', routerLink: { name: 'TestKeepTest3' } }
 ])
 
 const theme = ref((localStorage.getItem('VXE_THEME') as 'default' | 'dark') || 'default')
diff --git a/examples/router/index.ts b/examples/router/index.ts
index d5e17894cd..a2710735ba 100644
--- a/examples/router/index.ts
+++ b/examples/router/index.ts
@@ -44,6 +44,27 @@ const routes: Array<RouteRecordRaw> = [
     path: '/component/grid',
     name: 'GridTest',
     component: () => import('../views/grid/GridTest.vue')
+  },
+  {
+    path: '/keepAlives',
+    component: () => import('../views/keepAlives/TestKeepAlive.vue'),
+    children: [
+      {
+        path: 'keepTest1',
+        name: 'TestKeepTest1',
+        component: () => import('../views/keepAlives/pages/Table1.vue')
+      },
+      {
+        path: 'keepTest2',
+        name: 'TestKeepTest2',
+        component: () => import('../views/keepAlives/pages/Table2.vue')
+      },
+      {
+        path: 'keepTest3',
+        name: 'TestKeepTest3',
+        component: () => import('../views/keepAlives/pages/Table3.vue')
+      }
+    ]
   }
 ]
 
diff --git a/examples/views/keepAlives/TestKeepAlive.vue b/examples/views/keepAlives/TestKeepAlive.vue
new file mode 100644
index 0000000000..e537769ddb
--- /dev/null
+++ b/examples/views/keepAlives/TestKeepAlive.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <router-view v-slot="{ Component }">
+      <keep-alive>
+        <component :is="Component" />
+      </keep-alive>
+    </router-view>
+  </div>
+</template>
diff --git a/examples/views/keepAlives/pages/Table1.vue b/examples/views/keepAlives/pages/Table1.vue
new file mode 100644
index 0000000000..f7a41d3f7e
--- /dev/null
+++ b/examples/views/keepAlives/pages/Table1.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <p>子路由 1</p>
+
+    <vxe-table
+      border
+      show-overflow
+      height="400"
+      ref="tableRef"
+      :loading="demo1.loading"
+      :scroll-y="{enabled: true, gt: 0}">
+      <vxe-column type="seq" width="60"></vxe-column>
+      <vxe-column field="name" title="Name"></vxe-column>
+      <vxe-column field="sex" title="Sex"></vxe-column>
+      <vxe-column field="address" title="Address" show-overflow></vxe-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script lang="tsx">
+import { defineComponent, reactive, ref, nextTick } from 'vue'
+import { VxeTableInstance } from '../../../../types'
+
+export default defineComponent({
+  setup () {
+    const tableRef = ref<VxeTableInstance>()
+
+    const mockList = (size: number) => {
+      const list: any[] = []
+      for (let index = 0; index < size; index++) {
+        list.push({
+          name: `名称${index}`,
+          role: `角色${index}`,
+          sex: '0',
+          num: 123,
+          age: 18,
+          num2: 234,
+          rate: 3,
+          address: 'shenzhen'
+        })
+      }
+      return list
+    }
+
+    const demo1 = reactive({
+      loading: false
+    })
+
+    demo1.loading = true
+    setTimeout(() => {
+      demo1.loading = false
+      nextTick(() => {
+        const $table = tableRef.value
+        if ($table) {
+          $table.loadData(mockList(10000))
+        }
+      })
+    }, 300)
+
+    return {
+      demo1,
+      tableRef
+    }
+  }
+})
+</script>
diff --git a/examples/views/keepAlives/pages/Table2.vue b/examples/views/keepAlives/pages/Table2.vue
new file mode 100644
index 0000000000..e2c16906d7
--- /dev/null
+++ b/examples/views/keepAlives/pages/Table2.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <p>子路由 2</p>
+
+    <vxe-table
+      border
+      show-overflow
+      ref="tableRef"
+      height="400"
+      :loading="demo1.loading"
+      :scroll-y="{enabled: true, gt: 0}">
+      <vxe-column type="radio" width="60"></vxe-column>
+      <vxe-column field="role" title="Role"></vxe-column>
+      <vxe-column field="age" title="Age"></vxe-column>
+      <vxe-column field="num2" title="Num2"></vxe-column>
+      <vxe-column field="rate" title="Rate"></vxe-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script lang="tsx">
+import { defineComponent, reactive, ref, nextTick } from 'vue'
+import { VxeTableInstance } from '../../../../types'
+
+export default defineComponent({
+  setup () {
+    const tableRef = ref<VxeTableInstance>()
+
+    const mockList = (size: number) => {
+      const list: any[] = []
+      for (let index = 0; index < size; index++) {
+        list.push({
+          name: `名称${index}`,
+          role: `角色${index}`,
+          sex: '0',
+          num: 123,
+          age: 18,
+          num2: 234,
+          rate: 3,
+          address: 'shenzhen'
+        })
+      }
+      return list
+    }
+
+    const demo1 = reactive({
+      loading: false
+    })
+
+    demo1.loading = true
+    setTimeout(() => {
+      demo1.loading = false
+      nextTick(() => {
+        const $table = tableRef.value
+        if ($table) {
+          $table.loadData(mockList(10000))
+        }
+      })
+    }, 300)
+
+    return {
+      demo1,
+      tableRef
+    }
+  }
+})
+</script>
diff --git a/examples/views/keepAlives/pages/Table3.vue b/examples/views/keepAlives/pages/Table3.vue
new file mode 100644
index 0000000000..22f754f5d0
--- /dev/null
+++ b/examples/views/keepAlives/pages/Table3.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <p>子路由 3</p>
+
+    <vxe-table
+      border
+      show-overflow
+      ref="tableRef"
+      height="400"
+      :loading="demo1.loading"
+      :scroll-y="{enabled: true, gt: 0}">
+      <vxe-column type="checkbox" width="60"></vxe-column>
+      <vxe-column field="name" title="Name"></vxe-column>
+      <vxe-column field="sex" title="Sex"></vxe-column>
+      <vxe-column field="age" title="Age"></vxe-column>
+      <vxe-column field="num" title="Num"></vxe-column>
+      <vxe-column field="num2" title="Num2"></vxe-column>
+      <vxe-column field="rate" title="Rate"></vxe-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script lang="tsx">
+import { defineComponent, reactive, ref, nextTick } from 'vue'
+import { VxeTableInstance } from '../../../../types'
+
+export default defineComponent({
+  setup () {
+    const tableRef = ref<VxeTableInstance>()
+
+    const mockList = (size: number) => {
+      const list: any[] = []
+      for (let index = 0; index < size; index++) {
+        list.push({
+          name: `名称${index}`,
+          role: `角色${index}`,
+          sex: '0',
+          num: 123,
+          age: 18,
+          num2: 234,
+          rate: 3,
+          address: 'shenzhen'
+        })
+      }
+      return list
+    }
+
+    const demo1 = reactive({
+      loading: false
+    })
+
+    demo1.loading = true
+    setTimeout(() => {
+      demo1.loading = false
+      nextTick(() => {
+        const $table = tableRef.value
+        if ($table) {
+          $table.loadData(mockList(10000))
+        }
+      })
+    }, 300)
+
+    return {
+      demo1,
+      tableRef
+    }
+  }
+})
+</script>
diff --git a/package.json b/package.json
index 3369afd657..72bc622eb9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.7.30",
+  "version": "4.7.31",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.0.27"
+    "vxe-pc-ui": "^4.0.28"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",
diff --git a/packages/table/src/emits.ts b/packages/table/src/emits.ts
index 797f029d6e..684000976d 100644
--- a/packages/table/src/emits.ts
+++ b/packages/table/src/emits.ts
@@ -23,6 +23,7 @@ export default [
   'cell-mouseleave',
   'cell-selected',
   'cell-delete-value',
+  'cell-backspace-value',
   'header-cell-click',
   'header-cell-dblclick',
   'header-cell-menu',
diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
index 85e5d7c6b0..7c2b07af58 100644
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -4876,7 +4876,7 @@ export default defineComponent({
           const childrenField = treeOpts.children || treeOpts.childrenField
           const keyCode = evnt.keyCode
           const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
-          const isBack = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.BACKSPACE)
+          const hasBackspaceKey = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.BACKSPACE)
           const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB)
           const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER)
           const isSpacebar = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR)
@@ -4884,7 +4884,7 @@ export default defineComponent({
           const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP)
           const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT)
           const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN)
-          const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE)
+          const hasDeleteKey = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE)
           const isF2 = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.F2)
           const isContextMenu = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.CONTEXT_MENU)
           const hasMetaKey = evnt.metaKey
@@ -5009,11 +5009,31 @@ export default defineComponent({
             } else if (actived.row || actived.column) {
               $xeTable.moveTabSelected(actived.args, hasShiftKey, evnt)
             }
-          } else if (keyboardConfig && isEnableConf(editConfig) && (isDel || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
+          } else if (keyboardConfig && keyboardOpts.isDel && hasDeleteKey && isEnableConf(editConfig) && (selected.row || selected.column)) {
+            // 如果是删除键
+            if (!isEditStatus) {
+              const { delMethod } = keyboardOpts
+              const delPaqrams = {
+                row: selected.row,
+                rowIndex: tableMethods.getRowIndex(selected.row),
+                column: selected.column,
+                columnIndex: tableMethods.getColumnIndex(selected.column),
+                $table: $xeTable
+              }
+              if (delMethod) {
+                delMethod(delPaqrams)
+              } else {
+                setCellValue(selected.row, selected.column, null)
+              }
+              // 如果按下 del 键，更新表尾数据
+              tableMethods.updateFooter()
+              $xeTable.dispatchEvent('cell-delete-value', delPaqrams, evnt)
+            }
+          } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selected.row || selected.column)) {
             if (!isEditStatus) {
               const { delMethod, backMethod } = keyboardOpts
               // 如果是删除键
-              if (keyboardOpts.isDel && (selected.row || selected.column)) {
+              if (keyboardOpts.isDel && isEnableConf(editConfig) && (selected.row || selected.column)) {
                 const delPaqrams = {
                   row: selected.row,
                   rowIndex: tableMethods.getRowIndex(selected.row),
@@ -5026,39 +5046,34 @@ export default defineComponent({
                 } else {
                   setCellValue(selected.row, selected.column, null)
                 }
-                if (isBack) {
-                  if (backMethod) {
-                    backMethod({
-                      row: selected.row,
-                      rowIndex: tableMethods.getRowIndex(selected.row),
-                      column: selected.column,
-                      columnIndex: tableMethods.getColumnIndex(selected.column),
-                      $table: $xeTable
-                    })
-                  } else {
-                    $xeTable.handleActived(selected.args, evnt)
-                  }
-                } else if (isDel) {
-                  // 如果按下 del 键，更新表尾数据
-                  tableMethods.updateFooter()
-                }
-                $xeTable.dispatchEvent('cell-delete-value', delPaqrams, evnt)
-              } else if (isBack && keyboardOpts.isArrow && treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
-                // 如果树形表格回退键关闭当前行返回父节点
-                const { parent: parentRow } = XEUtils.findTree(internalData.afterFullData, item => item === currentRow, { children: childrenField })
-                if (parentRow) {
-                  evnt.preventDefault()
-                  params = {
-                    $table: $xeTable,
-                    row: parentRow,
-                    rowIndex: tableMethods.getRowIndex(parentRow),
-                    $rowIndex: tableMethods.getVMRowIndex(parentRow)
-                  }
-                  tableMethods.setTreeExpand(parentRow, false)
-                    .then(() => tableMethods.scrollToRow(parentRow))
-                    .then(() => tablePrivateMethods.triggerCurrentRowEvent(evnt, params))
+                if (backMethod) {
+                  backMethod({
+                    row: selected.row,
+                    rowIndex: tableMethods.getRowIndex(selected.row),
+                    column: selected.column,
+                    columnIndex: tableMethods.getColumnIndex(selected.column),
+                    $table: $xeTable
+                  })
+                } else {
+                  $xeTable.handleActived(selected.args, evnt)
                 }
+                $xeTable.dispatchEvent('cell-backspace-value', delPaqrams, evnt)
+              }
+            }
+          } else if (hasBackspaceKey && keyboardConfig && treeConfig && keyboardOpts.isBack && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
+            // 如果树形表格回退键关闭当前行返回父节点
+            const { parent: parentRow } = XEUtils.findTree(internalData.afterTreeFullData, item => item === currentRow, { children: childrenField })
+            if (parentRow) {
+              evnt.preventDefault()
+              params = {
+                $table: $xeTable,
+                row: parentRow,
+                rowIndex: tableMethods.getRowIndex(parentRow),
+                $rowIndex: tableMethods.getVMRowIndex(parentRow)
               }
+              tableMethods.setTreeExpand(parentRow, false)
+                .then(() => tableMethods.scrollToRow(parentRow))
+                .then(() => tablePrivateMethods.triggerCurrentRowEvent(evnt, params))
             }
           } else if (keyboardConfig && isEnableConf(editConfig) && keyboardOpts.isEdit && !hasCtrlKey && !hasMetaKey && (isSpacebar || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
             const { editMethod } = keyboardOpts