Vuetify v-data-table перетаскивание - PullRequest
Новая
       43

Vuetify v-data-table перетаскивание

2 голосов
/ 09 июля 2019

Я использую V-data-table вместе с vuex store. Ниже приведены пункты, как я настроил свою v-data-таблицу

  1. Отключить сортировку по каждому столбцу
  2. связывает элементы таблицы v-data с данными хранилища состояний vuex
  3. использование sortablejs для перетаскивания строк

Проблема: Когда я перетаскиваю строки в таблице v-data, я обновляю хранилище vuex (обновляя значение индекса для объектов в массиве значением индекса строки таблицы). Vuex корректно обновляется, но данные, представленные в таблице v-data, расположены не по порядку, как в хранилище состояний vuex

Может ли кто-нибудь помочь мне в этом

Лучший способ, которым я пытался преодолеть эту проблему, - это принудительно повторно выполнить рендеринг компонента v-data-table, но когда я делаю это, я не могу больше перетаскивать

Сила отрисовывается с использованием следующего шаблона 

<template>
  <component-to-re-render :key="componentKey" />
</template>
// script
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

1 Ответ

1 голос
/ 17 июля 2019

Возможно, это не оптимальное решение, но у меня была похожая проблема, за исключением того, что я просто использовал обычный массив. Мне удалось это исправить, вызвав метод Sortable.create () в хуке жизненного цикла updated ().

Я предполагаю, что когда вы вызываете Sortable.create (table, ...), он ссылается на этот экземпляр элемента таблицы. Однако, когда вы пытаетесь изменить таблицу путем изменения ключа, он меняет этот экземпляр. Поэтому при каждом обновлении компонента vue вам нужно снова вызывать Sortable.create ().

...