Chrome浏览器自带翻译的诡异Bug：ID翻译后竟然变化了

当前负责的项目主打海外业务，总免不了和多语言打交道。但最近我在Vite+Vue3+Element Plus技术栈的项目里，遇到了一个堪称"玄学"的bug------Chrome浏览器自带翻译功能，居然能把表格里的数字ID直接改了！从印度同事到国内运营，两次触发都让我摸不着头脑，今天把整个过程记录下来，求大佬们看看这到底是怎么回事。

一、两次"诡异漂移"：翻译按钮成了ID篡改器

我们的后台管理系统很明确：部分页面根元素设为lang="zh"（中文界面），部分设为lang="en"（英文界面），语言标识没搞混也没遗漏。

第一次：印度同事的英文翻译触发

年初，负责海外业务的印度同事反馈："搜索出来的广告数据有问题，Ad ID从10111872变成10111873了"。我第一时间查接口，返回的ID明明是正确的10111872；再看前端代码，就是最常规的Element Plus表格用法，没有任何多余计算。

远程连接他的电脑才发现，他把中文界面用Chrome右键翻译成了英文------我让他关闭翻译功能刷新页面，ID瞬间恢复10111872；重新开启翻译，数字又跳成10111873。当时以为是个案，没深查，只提醒他暂时不用翻译。

第二次：国内运营的中文翻译触发

前天，国内运营同事在英文界面操作时，把页面翻译成中文，结果历史重演：表格里的ID 20011872直接变成20011873。这次我确定不是偶然，而是Chrome翻译和Element Plus表格的"兼容性陷阱"。

贴一下我们的核心代码，真的就是最基础的el-table配置，没有任何花里胡哨的操作：

html 复制代码

<template>
  <div lang="zh"> 
    <el-table
      :data="orderTableData"
      border
      stripe
      style="width: 100%"
    >
      <!-- 普通列：Ad Name翻译正常，无异常 -->
      <el-table-column
        label="Ad Name"  
        prop="adName"
        width="200"
      />
      
      <!-- 异常列：开启Chrome翻译后，该列adId数值会发生漂移（如10111872→10111873） -->
      <el-table-column
        label="Ad ID"  
        prop="adId"
        width="200"
      />
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

// 模拟接口返回数据，真实场景为接口拉取
const orderTableData = ref([
  { adId: 10111872, adName: "Summer Promotion", status: "已上线" },
  { adId: 10111172, adName: "New Product Launch", status: "待审核" },
  { adId: 10111272, adName: "Member Exclusive", status: "已下线" }
]);
</script>

二、排查过程：绕了一圈，排除所有常规可能

为了找到问题根源，我几乎把能排查的点都过了一遍，但结果全是"正常"：

接口与数据层面：Network面板反复确认，接口返回的adId是正确值，没有被篡改；前端接收数据后也没有做任何运算，直接赋值给表格数据源。
本地与多设备测试：我换了自己的Windows、MacBook，又找了5个同事用不同系统（Windows10/11、macOS）测试，无论怎么开翻译，ID都纹丝不动。
浏览器环境排查：远程检查触发异常的两台电脑，Chrome都是最新版本，没有安装任何可疑插件，清除缓存、重启浏览器后，问题依然存在。
代码与依赖检查：Element Plus版本是稳定版，没有兼容性问题；表格没有自定义渲染函数，也没有使用任何修改DOM的指令或插件。

排查到最后，我甚至怀疑是不是"量子纠缠"------直到发现两次异常都有一个共同触发条件：Chrome浏览器开启页面翻译。

三、解决方案：给ID加"翻译豁免权"

既然确定是翻译功能搞的鬼，就顺着这个方向找解决方案。查HTML标准发现，HTML5原生有个translate属性，专门控制元素是否参与翻译------给元素加translate="no"，浏览器就会跳过该元素的翻译处理。

针对表格ID列做了修改，核心是给ID所在的元素添加这个属性，修改后的代码如下：

html 复制代码

<!-- 修复后的ID列代码，其他列不变 -->
<el-table-column label="Ad ID" width="200">
  <template #default="scope">
    <!-- 关键修复：添加translate="no"，禁止Chrome翻译该节点，避免ID数值被篡改 -->
    <span class="ad-id" translate="no">{{ scope.row.adId }}</span>
  </template>
</el-table-column>

把修改后的代码发给出问题的同事，他们开启翻译再测试------ID稳稳地显示正确值，再也没有出现"漂移"。这个临时方案虽然解决了问题，但我的疑惑更重了。

四、疑惑：这到底是Chrome的bug，还是我漏了什么？

虽然问题解决了，但几个疑问始终萦绕在我心头，想借这篇文章问问各位大佬：

为什么只有特定设备触发这个问题？同样的Chrome版本、同样的操作，大部分设备正常，而触发的同事电脑上设备必现，难道和浏览器的某些隐藏配置有关？
为什么ID篡改有固定规律？两次异常都是ID末尾+1，不是随机乱改，这背后有没有特定的DOM处理逻辑？
这是Chrome翻译的bug，还是Element Plus表格的DOM结构容易被翻译器误判？有没有更根本的解决办法，而不是给每个关键节点加豁免？