如何仅修改v-data-table中指定单行的内容而非同列全部行

问题根因 #

你当前定义的copied是组件全局的布尔状态，所有表格行共用这一个状态值，只要状态变更，所有带link的行都会同步显示/隐藏对勾，这就是点击一行所有行都出现对勾的原因。

解决步骤 #

1. 修改状态定义 #

把原来的全局布尔copied改成存储「当前复制成功的行唯一标识」，这里我们用每行唯一的link字段当标识，初始值设为null：

// data 部分修改
data(): PriceData {
  return {
    rowsPerPageItems: [10, 20, 30],
    copiedLink: null, // 替换原来的 copied: false
  }
}

2. 改造copyLink方法 #

复制成功后把当前行的link赋值给copiedLink，3秒后清空：

methods: {
  copyLink(previewLink: string) {
    this.$copyText(previewLink).then(
      () => {
        this.copiedLink = previewLink
        setTimeout(()=> {
          this.copiedLink = null
        },3000)
      },
      () => {
        // 自行补充错误逻辑
        this.copiedLink = null
      }
    )
  },
}

3. 修改模板显示判断 #

只在当前行的link和copiedLink相等时，才显示对勾：

<template v-slot:[`item.name`]="{ item }">
  <span v-if="item.link" class="link-span" @contextmenu="copyLink(item.link)">
    <a class="preview-link" :href="item.preview" target="_blank">{{ item.name }}</a>
    <p v-show="copiedLink === item.link">
      <v-icon small color="green">fas fa-check</v-icon>
    </p>
  </span>
  <span v-else>
    {{ item.name }}
  </span>
</template>

补充说明：如果你的item字段里有更稳定的唯一主键（比如id），也可以用id作为标识，逻辑完全一致：copyLink时传入item.id，显示判断用copiedId === item.id即可，比用link作为标识更稳妥。

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