表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？

Question

现在的情况是点击菜单切换表数据后点击copyCell方法复制数据，然后执行getData获取新的表数据。
当我第一次点击复制，跳转到了对应的page页，高亮的class名称在，高亮效果不显示，当我第二次点击复制，这个高亮效果显示。第三次点击复制，高亮不显示，第四次显示，以此类推，这种情况该怎么解决？

第一次复制没有高亮：

第二次复制有高亮：

html相关

 <a-table
  :key="props.sheetList"
  :rowKey="(record) => record.key"
  :row-selection="rowSelection"
  :data-source="dataSource"
  :columns="columns"
  @resizeColumn="handleResizeColumn"
  :pagination="paginationConfig"
  @change="handleTableChange"
  ref="tableRef"
  :scroll="{
    y: 650,
    x: 3000,
  }"
  :row-class-name="rowClassName"
>
...
<template v-if="column.dataIndex === 'operation'">
  <div class="opera-box">
       <a-popconfirm
        placement="topRight"
        title="是否复制该行导入数据库？"
        @confirm="copyCell(record.key, record)"
        @cancel="copyCancel"
      >
        <div class="copy-btn">
          <CopyOutlined />
        </div>
      </a-popconfirm>
    </div>
 </template>
</a-table>

分页部分：

const paginationConfig = ref({
  current: 1, // 当前页码
  defaultPageSize: 15, // 默认每页条目数
  showSizeChanger: true, // 是否显示改变每页数量的选择器
  pageSizeOptions: ["15", "50", "100"], // 每页条目数选项
});
const handleTableChange = (pagination) => {
  paginationConfig.value.current = pagination.current;
  paginationConfig.value.pageSize = pagination.pageSize;
};

复制方法copyCell

const copyCell = async (key, res) => {
  let list = { ...res };
  delete list.key;
  await getQueueMsg("DbiViewServer", {
    api: "DbiViewServer",
    method: "CopyRow",
    data: [
      {
        tablename: props.sheetList.value,
        user: state.formData.username,
        row_list: list,
      },
    ],
  }).then((res) => {
    if (!res.success) {
      message.error(res.note, 2);
    } else {
      message.success(res.note);
      tableSpinVis.value = true;
      state.idType = res.data[0];
      getData();
    }
  });
};

获取表数据getData，我是通过判断state.idType是否为null，再执行scrollToRow方法添加高亮的

const getData = () => {
  try {
    let sList = listArr2.filter((item) => item.key).map((item) => item.key);
    getQueueMsg("DbiViewServer", {
      api: "DbiViewServer",
      method: "GetTableData",
      data: [
        {
          tablename: props.sheetList.value,
          user: state.formData.username,
          st_id: null,
          owner: null,
          strlist: sList,
        },
      ],
    }).then((res) => {
      dataSource.value = res.data;
      dataSource.value.forEach((item, i) => {
        item.key = item.ID + "_" + i;
      });
    });
  } catch (err) {
    console.error(err);
  } finally {
    setTimeout(() => {
      tableSpinVis.value = false;
      nextTick(() => {
        if (state.idType != null) {
          scrollToRow(state.idType);
        } else {
          paginationConfig.value.current = 1;
          state.idType = null;
        }
      });
    }, 1500);
  }
};

scrollToRow方法

const tableRef = ref(null);
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) {
    nextTick(() => {
      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}"]`
        );
        console.log(rowElement); // 打印结果在上面的图片中
        // 清除之前高亮的行（如果有的话，这里删了也没有什么作用。）
        const previouslyHighlightedRow = tableBody.querySelector(".highlighted-row");
        if (previouslyHighlightedRow) {
          previouslyHighlightedRow.classList.remove("highlighted-row");
        }

        if (rowElement) {
          // 添加高亮样式
          rowElement.classList.add("highlighted-row");
          // 强制触发样式刷新
          rowElement.style.display = "none";
          rowElement.offsetHeight;
          rowElement.style.display = "";
          const tableBodyScrollTop = rowElement.offsetTop - tableBody.offsetTop;
          tableBody.scrollTop = tableBodyScrollTop;
        }
      }
    });
  } else {
    console.warn("未找到指定 rowKey 的行");
  }
};

Answer 1

// ... existing code ...
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}"]`
        );
        
     
        const allHighlightedRows = tableBody.querySelectorAll(".highlighted-row");
        allHighlightedRows.forEach(el => {
          el.classList.remove("highlighted-row");
        });

        if (rowElement) {
        
          requestAnimationFrame(() => {
            rowElement.classList.add("highlighted-row");
    
            const tableBodyScrollTop = rowElement.offsetTop - tableBody.offsetTop;
            tableBody.scrollTop = tableBodyScrollTop;
          });
        }
      }
    }, 100); // 增加延迟时间
  } else {
    console.warn("未找到指定 rowKey 的行");
  }
};
// ... existing code ...