如何在 Vuetify 数据表中同时使用 v-slot:item 和 v-slot:item.<name>？

Question

我有一个相当定制的 Vuetify 数据表，我正在使用，因为我用自定义变体覆盖了几列：

<v-data-table
    :headers="headers"
    :items="category.items"
    hide-default-footer
    show-select
    single-select
    sort-by="position"
    sort-desc>
    <template v-slot:item.data-table-select="{ item }">
        <v-icon
            class="handle grab">
            mdi-drag-vertical
        </v-icon>
    </template>

    <!-- Type Edit In Place -->
    <template v-slot:item.generic_type="{ item }">
        <span
            v-if="editableItem !== `type${item.id}Ref`"
            @click="setEditing(`type${item.id}Ref`);">
            {{ item.generic_type }}
        </span>
        <v-text-field
            v-else
            :ref="`type${item.id}Ref`"
            :value="item.generic_type"
            color="primary"
            dense
            hide-details
            type="text"
            outlined
            @blur="updateItem($event.target.value, item, 'generic_type')"
            @change="updateItem($event, item, 'generic_type')" />
    </template>

    // Several others similar to the input above //

</v-data-table>

现在虽然我正在尝试实现 SortableJS，但我需要能够向数据表的每一行添加一个自定义数据属性，以便我稍后可以在我的 Sortable 函数中引用它。

根据Vuetify 文档，Some slots will override each other such as: body > item > item.<name> and header/header.<name>.

我如何编写自定义表格行，以便我可以附加自定义数据属性，以及保留我自定义编写的现有表格列？

Answer 1

经过几天的混乱和大量的谷歌搜索，我终于找到了解决这个问题的方法，甚至排序仍然有效！希望这对其他人有帮助。

<v-data-table
  class="items-table-container"
  :headers="headers"
  :items="category.items"
  hide-default-footer
  single-select
  sort-by="position"
  sort-desc>
  <template
    v-slot:item="{ item, index }">
      <tr
        :data-category-id="category.id"
        :data-id="item.id">
        <td>
          <v-icon class="handle grab">
            mdi-drag-vertical
          </v-icon>
        </td>

        <!-- Type Edit In Place -->
        <td>
          <span
            v-if="editableItem !== `type${item.id}Ref`"
            @click="setEditing(`type${item.id}Ref`);">
            {{ item.generic_type }}
          </span>
          <v-text-field
            v-else
            :ref="`type${item.id}Ref`"
            :value="item.generic_type"
            color="primary"
            dense
            hide-details
            type="text"
            outlined
            @blur="updateItem($event.target.value, item, 'generic_type')"
            @change="updateItem($event, item, 'generic_type')" />
       </td>

       // Several others similar to the input above //
    </tr>
  </template>
</v-data-table>

基本上我正在使用v-slot:item, 并创建我自己的表格行和单元格。