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 docs，Some slots will override each other such as: body > item > item.<name> and header/header.<name>.

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

Answer 1

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

<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，并创建自己的表行和单元格。

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

1 个答案: