如何使用 v-data-table 上下移动行？答案

【问题标题】：How to move rows up & down using v-data-table?如何使用 v-data-table 上下移动行？
【发布时间】：2020-06-13 15:19:32
【问题描述】：

我想知道是否可以上下移动行？

我使用的是复选框功能，以及文档中的 CRUD 数据表。我真的在文档中找不到任何示例。我的 v-data-table 目前看起来像这样

<v-data-table 
            v-model="selected"
            :headers="headers" 
            :items="rows" 
            :search="search" 
            disable-pagination
            hide-default-footer
            show-select
            class="elevation-1" >
            <template v-slot:item="props">
                <tr>
                    <td>
                        <v-checkbox
                            v-model="props.selected"
                            :disabled="!props.selected && selected.length != 0"
                            :indeterminate="!props.selected && selected.length != 0"
                        ></v-checkbox>
                    </td>
                    <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">
                            {{props.item[key]}}</td>
                    <td>
                        <v-icon small class="mr-2"  @click="editItem(props.item)">
                            mdi-pencil
                        </v-icon>
                        <v-icon small @click="deleteItem(props.item, getItemAtIndex(navItem))">
                            mdi-delete
                        </v-icon>
                        </td>
                </tr>
            </template>
            <template> <!-- A dialog box for editing content-->
            </template>
</v-data-table>

【问题讨论】：

你必须实现这个功能。 Butbits 很简单，只需使用拖动事件对行进行排序，可能与 click:row 一起使用

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

你可以看看这个例子。该示例具有向上和向下箭头，您将单击它，它将更新项目数组。请注意，您必须使用 Vue.$set 来对 items 数组进行响应式更新。

示例是使用 vue-composition api 和 typescript 完成的

https://gist.github.com/JeremyWalters/457ea585bab678b3bafeb3ee16e96401

<template>
    <v-data-table :headers="headers" :items="items">
      <template v-slot:item.actionUp="{item}">
        <v-btn color="success" icon @click="moveUp(item.id)">
          <v-icon>mdi-arrow-up</v-icon>
        </v-btn>
      </template>
      <template v-slot:item.actionDown="{item}">
        <v-btn color="warning" icon @click="moveDown(item.id)">
          <v-icon>mdi-arrow-down</v-icon>
        </v-btn>
      </template>
    </v-data-table>
</template>

<script lang="ts">
import {
  defineComponent,
  SetupContext,
  ref,
  onMounted,
  Ref
} from "@vue/composition-api";
export default defineComponent({
  setup(props: any, context: SetupContext) {
    const items: Ref<any[]> = ref([]);
    const headers = [
      { text: "Test Value", value: "testValue" },
      { text: "", value: "actionUp" },
      { text: "", value: "actionDown" }
    ];
    // Create data example
    onMounted(() => {
      for (let i = 0; i < 20; i++) {
        items.value.push({ id: i, testValue: "testValue " + i });
      }
    });

    // Move items up in the array
    function moveUp(id: number) {
      const index = items.value.findIndex(e => e.id == id);
      if (index > 0) {
        const el = items.value[index];
        context.root.$set(items.value, index, items.value[index - 1]);
        context.root.$set(items.value, index - 1, el);
      }
    }
    // Move items down in the array
    function moveDown(id: number) {
      const index = items.value.findIndex(e => e.id == id);
      debugger;
      if (index !== -1 && index < items.value.length - 1) {
        const el = items.value[index];
        context.root.$set(items.value, index, items.value[index + 1]);
        context.root.$set(items.value, index + 1, el);
      }
    }
    return {
      moveUp,
      moveDown,
      headers,
      items
    };
  }
});
</script>

【讨论】：