Vue.Draggable 可以与 Vuetify v-data-table 一起使用并允许使用表 v-slot:item。<name>?

Question

Vuetify

v-data-table

支持多种类型的插槽：

v-slot:body

、

v-slot:item

和

v-slot:item.<name>

。

我们一直在广泛使用

v-slot:item.<name>

，因为它们提供了一种灵活的方式来设计和处理各个列中的内容，并允许以编程方式更改表标题。

我想为我的

v-data-table

行添加可拖动性，并使用 Vue.Draggable 来实现此功能。

但是，

draggable

组件需要使用

v-data-table

v-slot:body

，即控制整个桌子，从而失去

v-slot:item.<name>

的灵活性。

有没有办法将这两个组件一起使用并提供

v-slot:item.<name>

支持？

Answer 1

我创建了一个

DataTableRowHandler

组件，它允许

v-slot:item.<name>

支持。

它被放置在

draggable

组件内部，插入表

<tr>

元素，并从相同的“headers”数组中插入

<td>

元素和

v-slot:item.<name>

条目。如果未定义

v-slot:item.<name>

，则输出单元格值，与

v-data-table

的工作方式相同。

以下是组件使用示例：

<v-data-table
  ref="myTable"
  v-model="selected"
  :headers="headers"
  :items="desserts"
  item-key="name"
  class="elevation-1"
>
  <template v-slot:body="props">
    <draggable
      :list="props.items"
      tag="tbody"
      :disabled="!allowDrag"
      :move="onMoveCallback"
      :clone="onCloneCallback"
      @end="onDropCallback"
    >
      <data-table-row-handler
        v-for="(item, index) in props.items"
        :key="index"
        :item="item"
        :headers="headers"
        :item-class="getClass(item)"
      >
        <template v-slot:item.lock="{ item }">
          <v-icon @click="item.locked = item.locked ? false : true">{{
            item.locked ? "mdi-pin-outline" : "mdi-pin-off-outline"
          }}</v-icon>
        </template>

        <template v-slot:item.carbs="{ item }">
          {{ item.carbs }}
          <v-icon>{{
            item.carbs > 80
              ? "mdi-speedometer"
              : item.carbs > 45
              ? "mdi-speedometer-medium"
              : "mdi-speedometer-slow"
          }}</v-icon>
        </template>
      </data-table-row-handler>
    </draggable>
  </template>
</v-data-table>

这是

DataTableRowHandler

组件代码

<template>
  <tr :class="getClass">
    <td v-for="(header, index) in headers" :key="index">
      <slot :item="item" :name="columnName(header)">
        <div :style="getAlignment(header)">
          {{ getNonSlotValue(item, header) }}
        </div>
      </slot>
    </td>
  </tr>
</template>

<script>
export default {
  name: "DataTableRowHandler",
  components: {},
  props: {
    itemClass: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    headers: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    getClass() {
      return this.itemClass;
    }
  },
  methods: {
    columnName(header) {
      return `item.${header.value}`;
    },
    getAlignment(header) {
      const align = header.align ? header.align : "right";
      return `text-align: ${align}`;
    },
    getNonSlotValue(item, header) {
      const val = item[header.value];

      if (val) {
        return val;
      }

      return "";
    },
  },
};
</script>

它的使用示例位于此 codesandbox 链接

Answer 2

我查看了VDataTable的

源代码

，发现

tbody

中的内容是由

genItems()

生成的。

下面的例子是用函数式组件实现的，完全兼容

v-slot:item*

：

<v-data-table ref="table" ...>
    <template #body="props">
        <draggable
            v-if="$refs.table"
            tag="tbody"
            :list="props.items"
        >
            <v-nodes :vnodes="$refs.table.genItems(props.items, props)" />
        </draggable>
    </template>

    <template #item.name="{ item }">
    ...
    </template>
</v-data-table>

这是

VNodes

组件的定义：

components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    }
}

Answer 3

如果您使用的是 Primevue DataTable 那么可以使用拖放即 Reorder https://primevue.org/datatable/#reorder 这是我给您的书签链接，您可以使用以下方法使数据表可重新记录。

1. 在数据表标签中使用：reorderableColumns =“true”@columnReorder =“onColReorder”@rowReorder =“onRowReorder”
2. 对于列使用 rowReorder
3. 要使列为假以可拖动，请使用：reorderableColumn =“false”