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

问题描述

Vuetify library(ggplot2) library(reshape2) x.All=as.data.frame(cbind(index=1:nrow(x.All[-1,]),x.All[-1,])) colnames(x.All)=c("index",paste("X",1:length(start_init)),"objfun") print(x.All) df <- melt(x.All,id.vars = 'index',variable.name = 'series') print(df) #create line plot for each column in data frame ggplot(df,aes(index,value)) + geom_line(aes(colour = series)) 支持多种类型的插槽：v-data-table、v-slot:body 和 v-slot:item。

我们一直在广泛使用 v-slot:item.<name>，因为它们提供了一种灵活的方式来设计和处理各个列中的内容，并允许以编程方式更改表头。

我想为我的 v-slot:item.<name> 行添加可拖动性，并使用 Vue.Draggable 使其工作。

然而，v-data-table 组件需要使用 draggable v-data-table，即控制整个表格，从而失去 v-slot:body 的灵活性。

有没有办法将这两个组件一起使用并提供 v-slot:item.<name> 支持？

解决方法

我创建了一个允许 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 link

v-data-table vue.js vuedraggable