Vuetify 2：如何为v-data-table的每行添加动态id属性？

下面提供几种无需妥协自定义单元格插槽的实现方式：

方法1：通过body插槽自定义行，兼容原有单元格插槽 #

直接重写表格的body插槽，手动渲染每行并绑定ID，同时保留已定义的item.[name]自定义单元格插槽：

<v-data-table
  :items="items"
  :headers="headers"
>
  <template v-slot:body="{ items, headers }">
    <tbody>
      <tr
        v-for="item in items"
        :key="item.id"
        :id="`row-${item.id}`" <!-- 动态绑定行ID -->
      >
        <td v-for="header in headers" :key="header.value">
          <!-- 优先使用自定义单元格插槽 -->
          <template v-if="$scopedSlots[`item.${header.value}`]">
            <slot :name="`item.${header.value}`" :item="item"></slot>
          </template>
          <!-- 无自定义插槽时渲染默认内容 -->
          <template v-else>
            {{ item[header.value] }}
          </template>
        </td>
      </tr>
    </tbody>
  </template>

  <!-- 原有的自定义单元格插槽完全不受影响 -->
  <template v-slot:item.name="{ item }">
    <span class="text-bold">{{ item.name }}</span>
  </template>
</v-data-table>

核心逻辑是通过$scopedSlots检测并调用已定义的单元格插槽，既实现了行ID的添加，又保留了原有自定义单元格的配置。

方法2：利用body.prepend插槽注入行属性（极简方案） #

Vuetify 2的body.prepend插槽可以向每行注入额外属性，无需重写整个tbody结构：

<v-data-table
  :items="items"
  :headers="headers"
>
  <!-- 注入行ID -->
  <template v-slot:body.prepend="{ item }">
    <tr :id="`row-${item.id}`" style="display: none;"></tr>
  </template>

  <!-- 自定义单元格插槽正常使用 -->
  <template v-slot:item.name="{ item }">
    <span class="text-success">{{ item.name }}</span>
  </template>
</v-data-table>

该方案的原理是Vuetify会将body.prepend插槽的内容合并到对应的行节点上，隐藏的<tr>不会影响布局，但会把ID属性带到真实的行元素中。

方法3：DOM操作兜底方案（适合不想修改模板的场景） #

如果不想改动模板结构，可以在组件挂载后通过DOM动态添加ID，同时监听数据变化确保ID同步更新：

<script>
export default {
  data() {
    return {
      items: [],
      headers: []
    }
  },
  mounted() {
    this.setRowIds()
  },
  watch: {
    items: {
      handler() {
        this.$nextTick(() => this.setRowIds())
      },
      deep: true
    }
  },
  methods: {
    setRowIds() {
      const rows = this.$el.querySelectorAll('.v-data-table__tbody tr')
      rows.forEach((row, idx) => {
        const item = this.items[idx]
        item?.id && row.setAttribute('id', `row-${item.id}`)
      })
    }
  }
}
</script>

注意：该方案依赖Vuetify的默认类名.v-data-table__tbody，若组件样式或类名变更可能失效。

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