如何在Vuetify数据表中同时使用v-slot:item和v-slot:ite.<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，并且需要能够向数据表的每一行添加一个自定义数据属性，以便稍后可以在可排序函数中引用它。

根据Vuetify docs的说法，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，并创建了自己的表行和单元格。