Vue动态表格编辑时识别修改字段及行ID的纯JS实现问题

方案一：直接在TD上绑定所需数据（推荐） #

先修改Vue模板，把循环索引i和产品IDp.pid直接绑定到TD的自定义data-*属性中，避免从TR的ID解析（容易因ID格式问题出错）：

<table id="product-table">
  <tr :id="`ep_${i}_${p.pid}`" v-for="(p, i) in products" :key="p.pid">
    <!-- 每个可编辑TD都绑定data-index、data-pid、data-field -->
    <td contenteditable="true" :data-index="i" :data-pid="p.pid" :data-field="name">{{ p.name }}</td>
    <td contenteditable="true" :data-index="i" :data-pid="p.pid" :data-field="price">{{ p.price }}</td>
    <!-- 其他字段TD同理 -->
  </tr>
</table>

然后用事件委托+捕获监听实现blur事件处理（因为blur事件不冒泡，必须用捕获阶段监听才能覆盖动态生成的元素）：

// 监听表格的blur事件，用事件委托统一处理
document.querySelector('#product-table').addEventListener('blur', function(e) {
  const td = e.target;
  // 过滤非目标元素
  if (td.tagName !== 'TD' || !td.isContentEditable) return;

  // 直接从data属性读取所需数据
  const rowIndex = td.dataset.index;
  const productId = td.dataset.pid;
  const fieldName = td.dataset.field;
  const newContent = td.textContent.trim();

  // 这里执行你的业务逻辑，比如提交修改
  console.log(`行索引：${rowIndex}，产品ID：${productId}，修改字段：${fieldName}，新值：${newContent}`);
}, true); // 第三个参数true开启捕获模式

方案二：从TR的ID解析数据（不推荐，仅兼容现有模板） #

如果不能修改Vue模板，只能从TR的ID解析索引和产品ID，需保证TR的ID格式严格为ep_${i}_${p.pid}（用下划线分隔，避免索引和产品ID混淆）：

document.querySelector('#product-table').addEventListener('blur', function(e) {
  const td = e.target;
  if (td.tagName !== 'TD' || !td.isContentEditable) return;

  // 获取当前TD所在的TR
  const tr = td.closest('tr');
  // 拆分TR的ID字符串
  const idParts = tr.id.split('_');
  // 按格式提取索引和产品ID
  const rowIndex = idParts[1];
  const productId = idParts[2];
  const fieldName = td.dataset.field;
  const newContent = td.textContent.trim();

  // 业务逻辑处理
  console.log(`行索引：${rowIndex}，产品ID：${productId}，修改字段：${fieldName}，新值：${newContent}`);
}, true);

关键注意点 #

• 必须使用捕获模式监听blur事件：因为blur属于不冒泡事件，普通冒泡阶段的事件委托无法监听到动态生成元素的blur动作。
• 优先选择方案一：直接绑定data属性的方式更可靠，避免因产品ID包含特殊字符（如下划线）导致ID解析失败。

内容的提问来源于stack exchange，提问作者zionnoizy