Vuetify v-data-table 拖放

Posted 2023-02-22

【中文标题】Vuetify v-data-table 拖放

【英文标题】：Vuetify v-data-table drag and drop

【发布时间】：2019-11-19 10:56:50

【问题描述】：

我正在使用 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;  
    
  

【问题讨论】：

你能显示你更新 vuex 商店的代码吗？

这是我在 mount 生命周期钩子上调用的方法，它从 vuex 动作中调用突变并更新 vuex 状态存储数组中对象的顺序Sortable.create(table, handle: ".handle", onEnd ( newIndex, oldIndex ) _self.$store.dispatch('adSets/updateAdSets', oldIndex: oldIndex, newIndex: newIndex, orderId: _self.orderId, campaignId: _self.campaignId) // location.reload() // _self.$refs.table.$forceUpdate() // _self.forceRerender() _self.reset() )

【参考方案1】：

这可能不是最佳解决方案，但我遇到了类似的问题，只是我只是使用常规数组。我设法通过在 updated() 生命周期钩子中调用 Sortable.create() 方法来修复它。

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