fix(data-table): doesn't restore scroll state when it's reactivated i…

…nside `keep-alive` component, closes #2522

CHANGELOG.en-US.md

@@ -10,6 +10,7 @@
 - Fix `n-scrollbar` can't show horizontal scrollbar, closes [#3047](https://github.com/TuSimple/naive-ui/issues/3047).
 - Fix `n-tree` node's pressed style is prior to selected style when `:block-line="true"` and `:selectable="true"`.
 - Fix `n-slider` may leak event handler on edga case.
+- Fix `n-data-table` doesn't restore scroll state when it's reactivated inside `keep-alive` component, closes [#2522](https://github.com/TuSimple/naive-ui/issues/2522).
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -10,6 +10,7 @@
 - 修复 `n-scrollbar` 无法显示横向滚动条，关闭 [#3047](https://github.com/TuSimple/naive-ui/issues/3047)
 - 修复 `n-tree` 在 `:block-line="true"` 并且 `:selectable="true"` 时节点的点击样式优先级高于激活样式
 - 修复 `n-slider` 在边界情况下可能泄露事件监听器
+- 修复 `n-data-table` 在 `keep-alive` 组件中使用重新激活时不会恢复滚动位置，关闭 [#2522](https://github.com/TuSimple/naive-ui/issues/2522)
 
 ### Feats
 

package.json

@@ -146,7 +146,7 @@
     "treemate": "^0.3.11",
     "vdirs": "^0.1.8",
     "vooks": "^0.2.12",
-    "vueuc": "^0.4.38"
+    "vueuc": "^0.4.39"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",

src/_internal/scrollbar/src/Scrollbar.tsx

@@ -279,8 +279,14 @@ const Scrollbar = defineComponent({
         activateStateInitialized = true
         return
       }
-      // remount
-      scrollTo({ top: scrollX, left: scrollY })
+      // Only restore for builtin container & content
+      if (!props.container) {
+        // remount
+        scrollTo({
+          top: containerScrollTopRef.value,
+          left: containerScrollLeftRef.value
+        })
+      }
     })
     onDeactivated(() => {
       isDeactivated = true
@@ -316,7 +322,7 @@ const Scrollbar = defineComponent({
     ): void => {
       if (!props.scrollable) return
       if (typeof options === 'number') {
-        scrollToPosition(options, y ?? 0, 0, false, 'auto')
+        scrollToPosition(y ?? 0, options, 0, false, 'auto')
         return
       }
       const {

src/data-table/demos/zhCN/index.demo-entry.md

@@ -50,6 +50,7 @@ fixed-column-debug
 fixed-column2-debug
 scroll-debug
 height-debug
+keep-alive-debug.vue
 ```
 
 ## API

src/data-table/demos/zhCN/keep-alive-debug.demo.vue

@@ -0,0 +1,120 @@
+<markdown>
+# Keep alive debug
+</markdown>
+
+<template>
+  <n-button @click="showTable = !showTable">
+    showTable: {{ showTable }}
+  </n-button>
+  <!-- 不虚拟
+  <keep-alive>
+    <component :is="showTable ? 'component-a' : 'n-empty'" />
+  </keep-alive> -->
+  虚拟
+  <keep-alive>
+    <component :is="showTable ? 'component-b' : 'n-empty'" />
+  </keep-alive>
+</template>
+
+<script lang="ts">
+import { h, defineComponent, ref } from 'vue'
+import type { DataTableColumns } from 'naive-ui'
+import { NDataTable } from 'naive-ui'
+
+type RowData = {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
+const columns: DataTableColumns<RowData> = [
+  {
+    type: 'selection',
+    fixed: 'left'
+  },
+  {
+    title: 'Name',
+    key: 'name',
+    width: 200,
+    fixed: 'left'
+  },
+  {
+    title: 'Age',
+    key: 'age',
+    width: 100,
+    fixed: 'left'
+  },
+  {
+    title: 'Row',
+    key: 'row',
+    render (row, index) {
+      return h('span', ['row ', index])
+    }
+  },
+  {
+    title: 'Row1',
+    key: 'row1',
+    render (row, index) {
+      return h('span', ['row ', index])
+    }
+  },
+  {
+    title: 'Row2',
+    key: 'row2',
+    render (row, index) {
+      return h('span', ['row ', index])
+    },
+    width: 100,
+    fixed: 'right'
+  },
+  {
+    title: 'Address',
+    key: 'address',
+    width: 200,
+    fixed: 'right'
+  }
+]
+
+const data: RowData[] = Array.from({ length: 50 }).map((_, index) => ({
+  key: index,
+  name: `Edward King ${index}`,
+  age: 32,
+  address: `London, Park Lane no. ${index}`
+}))
+
+const ComponentA = defineComponent({
+  render () {
+    return h(NDataTable, {
+      columns,
+      data,
+      maxHeight: 250,
+      scrollX: 1800
+    })
+  }
+})
+
+const ComponentB = defineComponent({
+  render () {
+    return h(NDataTable, {
+      columns,
+      data,
+      maxHeight: 250,
+      scrollX: 1800,
+      virtualScroll: true
+    })
+  }
+})
+
+export default defineComponent({
+  components: {
+    ComponentA,
+    ComponentB
+  },
+  setup () {
+    return {
+      showTable: ref(false)
+    }
+  }
+})
+</script>

src/data-table/src/DataTable.tsx

@@ -9,7 +9,8 @@ import {
   toRef,
   CSSProperties,
   Transition,
-  watchEffect
+  watchEffect,
+  onDeactivated
 } from 'vue'
 import { createId } from 'seemly'
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins'
@@ -236,6 +237,9 @@ export default defineComponent({
     )
     const bodyWidthRef = ref<number | null>(null)
     const scrollPartRef = ref<'head' | 'body'>('body')
+    onDeactivated(() => {
+      scrollPartRef.value = 'body'
+    })
     const mainTableInstRef = ref<MainTableRef | null>(null)
     const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } =
       useGroupHeader(props)