Question

我正在将V-data-table与vuex存储一起使用。以下是我配置v-data-table的要点

在每列上禁用排序
将v-data-table项目与vuex状态存储数据绑定
使用sortablejs拖放行

问题： 当我将行拖放到v-data-table中时，我正在更新vuex存储（用表行索引值更新数组中对象的索引值）。 Vuex正确更新，但是v-data-table中呈现的数据的顺序不像它们在vuex状态存储中的顺序

有人可以帮我吗

我试图克服此问题的最佳方法是强制重新呈现v-data-table组件，但是当我这样做时，我将无法再拖放

使用以下模板强制渲染

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

Answer 1

这可能不是最佳解决方案，但是我有一个类似的问题，只是我只是使用常规数组。我设法通过在update（）生命周期挂钩中调用Sortable.create（）方法来解决此问题。

我的猜测是，当您调用Sortable.create（table，...）时，它引用的是table元素的实例。但是，当您尝试通过修改键来更改表时，它将更改该实例。因此，每当vue组件更新时，您都需要再次调用Sortable.create（）。

Vuetify v-data-table拖放

1 个答案: