首页 > web前端 > css教程 > 正文

如何解决表数据复制后高亮效果交替出现的问题?

DDD
发布: 2025-04-23 19:04:28
原创
714人浏览过

如何解决表数据复制后高亮效果交替出现的问题?

在数据操作过程中,确保用户能够清晰地看到操作结果至关重要。目前的系统中,用户在点击菜单切换表数据并复制数据后,通过执行copycell方法进行数据复制,随后通过getdata方法获取新的表数据。然而,第一次复制数据后,高亮效果并未按预期显示,而是在第二次复制时才出现,之后的高亮效果显示与否呈现出交替的模式。本文将探讨如何解决这一高亮效果交替出现的问题。

根据提供的代码,复制操作和高亮显示的逻辑主要集中在copyCell和scrollToRow方法中。特别是scrollToRow方法负责处理跳转到指定页面并为对应行添加高亮样式。以下是经过调整的scrollToRow方法,通过这些修改,我们希望能够解决高亮效果的交替问题:

const scrollToRow = (rowKey) => {
  const row = dataSource.value.find((row) => row["ID"] === rowKey);
  const targetIndex = dataSource.value.findIndex(
    (item) => JSON.stringify(item.key) == JSON.stringify(row.key)
  );
  if (targetIndex !== -1) {
    const currentPageSize = paginationConfig.value.defaultPageSize;
    const targetPage = Math.floor(targetIndex / currentPageSize) + 1;
    paginationConfig.value.current = targetPage;
  }
  if (row) {
    setTimeout(() => {
      const tableBody = tableRef.value?.$el.querySelector(".ant-table-body");
      if (tableBody) {
        const rowElement = tableBody.querySelector(
          `table .ant-table-tbody tr[data-row-key="${row.key}"]`
        );
<pre class="brush:php;toolbar:false">    // 移除所有已高亮的行
    const allHighlightedRows = tableBody.querySelectorAll(".highlighted-row");
    allHighlightedRows.forEach(el => {
      el.classList.remove("highlighted-row");
    });

    if (rowElement) {
      // 使用 requestAnimationFrame 确保样式应用在下一帧
      requestAnimationFrame(() => {
        rowElement.classList.add("highlighted-row");

        // 计算并设置滚动位置
        const tableBodyScrollTop = rowElement.offsetTop - tableBody.offsetTop;
        tableBody.scrollTop = tableBodyScrollTop;
      });
    }
  }
}, 100); // 增加延迟时间
登录后复制

} else { console.warn("未找到指定 rowKey 的行"); } };

在调整后的scrollToRow方法中,我们采取了以下措施:

  1. 移除所有已高亮的行:通过查询所有带有highlighted-row类的元素,并移除其类名,确保在添加新高亮时不会有冲突。
  2. 使用setTimeout和requestAnimationFrame:增加了一个短暂的延迟时间(100毫秒),确保DOM更新后再进行高亮操作。同时,使用requestAnimationFrame来确保高亮样式的应用发生在下一帧,确保浏览器有时间更新样式。

通过以上调整,我们期望在每次复制数据后,高亮效果都能稳定地显示在对应行上,而不出现交替的情况。这不仅提高了用户体验,也确保了操作反馈的即时性和准确性。

如何解决表数据复制后高亮效果交替出现的问题?

以上就是如何解决表数据复制后高亮效果交替出现的问题?的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号