双击单元格切换为编辑框时，如何隐藏原文本单元格？

DevOps 小满

2026-7-26

解决双击单元格时原文本立即隐藏的问题

问题出在模板中原文本内容未与输入框做互斥显示判断，导致输入框弹出时原文本仍留在单元格内。同时手动调用hideOriginalData操作DOM的方式不够可靠，应该利用Vue的响应式状态控制显示逻辑。

修改步骤：

给原文本添加显示条件：用标签包裹原文本，通过v-if设置反向逻辑——仅当当前单元格非编辑状态时显示原文本。
输入框改用v-else：让输入框和原文本互斥显示，确保同一时间只展示其中一个。
移除DOM操作代码：删除enableEditing中的this.hideOriginalData(elementId)调用，依赖Vue响应式更新自动控制显示。

修改后的代码：

模板部分：

<td class="flex-table-cell"
    v-for="(header, index) in tableHeaders"
    :key="header"
    v-if="checkedHeaders.includes(header) && !tableInEditMode"
    :style="{ width: `${header[1]}%` }"
    @dblclick="enableEditing(item, header)"
    :id="`original-table-data-${itemIndex}-${index}`">
  <!-- 原文本：仅非编辑状态时显示 -->
  <span v-if="!item.editing || item.editingField !== header">
    {{ item[header.toLowerCase()] }}
  </span>
  <!-- 输入框：编辑状态且匹配当前字段时显示 -->
  <input
    v-else
    v-model="item[header.toLowerCase()]"
    @blur="disableEditing(item)"
    @keydown.enter.prevent="disableEditing(item)"
    :data-header="header"
    ref="editableInput"
  />
</td>

方法部分：

enableEditing(item, header) {
  this.$set(item, "editing", true);
  this.$set(item, "editingField", header);
  this.$nextTick(() => {
    // 匹配当前编辑字段的输入框并聚焦
    const targetInput = this.$refs.editableInput.find(input => input.dataset.header === header);
    targetInput?.focus();
  });
},
disableEditing(item) {
  this.$set(item, "editing", false);
  this.$set(item, "editingField", null);
}