问题：触发浏览器默认锚点行为，首次点击，刷新页面，虽然回到顶部，但未保存数据被清空。

<!-- 原始 -->

<span id="topAnchor"></span>

<!-- 回到顶部按钮 -->

<a href="#topAnchor" class="back-top-btn">

<a-icon type="arrow-up" />

</a>

解决方案：阻止默认行为 + 编程控制

<a @click.prevent="scrollToTop">回到顶部</a>


scrollToTop() {

    const anchor = document.getElementById('topAnchor')

        if (anchor) {

        anchor.scrollIntoView({ behavior: 'smooth', block: 'start' })

        } else {

        window.scrollTo({ top: 0, behavior: 'smooth' })

    }

}

关键技术点

• @click.prevent - 阻止默认链接行为
• scrollIntoView() - 编程式控制滚动
• behavior: 'smooth' - 添加平滑动画
• URL保持不变 - 避免路由重载

适用场景

• 单页应用(SPA)
• 需要平滑滚动效果
• 希望保持URL稳定的场景

配合CSS:

<a @click.prevent="scrollToTop">回到顶部</a>


scrollToTop() {

    const anchor = document.getElementById('topAnchor')

        if (anchor) {

        anchor.scrollIntoView({ behavior: 'smooth', block: 'start' })

        } else {

        window.scrollTo({ top: 0, behavior: 'smooth' })

    }

}


// css:回到顶部按钮样式
.back-top-btn {
    position: fixed;
    right: 80px;
    bottom: 100px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1890ff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
    cursor: pointer;
    z-index: 1000;
    &:hover {
    background-color: #40a9ff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

 
 &:active {
    transform: translateY(0);
 }
}

效果图

问题分析

Table 组件需要唯一的 rowKey 来正确管理展开状态。

原因详解

1. 虚拟DOM diff 算法依赖

React 使用虚拟DOM diff算法来高效更新UI。当Table数据更新时，React需要：

• 识别哪些行是新增的、哪些是删除的、哪些是更新的
• 正确保持展开/收起状态
• 如果没有唯一key，React无法准确追踪每行的状态

2. 展开状态管理

Table组件的展开状态是基于 rowKey 来管理的：

// 内部类似这样的结构
expandedRowKeys = ['id1', 'id3', 'id5']

如果没有唯一id，点击展开时可能出现：

• 多个行同时展开（主包遇到的bug）
• 展开状态错乱
• 无法正确收起

3. 性能优化

唯一key帮助React：

• 减少不必要的重渲染
• 提高diff算法效率
• 准确更新特定行的展开状态

解决方案对比

方案一：使用 uuid

import { v4 as uuidv4 } from 'uuid';

const dataWithId = recordData.list.map(item => ({
  ...item,
  id: uuidv4() // 全局唯一
}));

优点：绝对唯一

缺点：需要额外依赖包

方案二：时间戳+随机数

const dataWithId = recordData.list.map(item => ({
  ...item,
  id: `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
}));

优点：无依赖

缺点：极低概率重复（通常可接受）

方案三：使用数据中的唯一字段&字段拼接

// 如果数据本身有唯一字段
<Table rowKey="user_id" />

// 或者组合多个字段、data接口数据
const dataWithId = data.map(item => ({
  ...item,
  id: `${item.user_id}-${item.timestamp}`
}));

最佳实践

// 推荐：优先使用数据中的业务ID
// 
const dataWithId = recordData.list.map((item, index) => ({
  ...item,
  id: item.id || item.user_id || `row-${index}-${Date.now()}`
}));

<Table
  rowKey="id"
  columns={columns}
  expandable={{
    expandedRowRender: record => (
      <p style={{ margin: 0 }}>{record.change_content}</p>
    ),
    rowExpandable: record => record.change_content && record.change_content !== ''
  }}
  dataSource={dataWithId}
  pagination={false}
/>

正常表格数据都应有ID，没有去找后端要(狗头

那话又说回来了，真没招了就选择引入UUID或者时间戳+随机数的方法

总结

根本原因：Table组件依赖唯一的 rowKey 来正确管理每行的展开状态和进行高效的虚拟DOM diff。

修复核心：确保每行数据都有一个唯一标识，让React能够准确追踪和管理每行的状态。