Question

我发现了一些类似的问题，例如this和this。但我的问题有些不同。我每秒使用axios从我的REST Api轮询表的数据。我需要的是用户在数据更新时自由操作（即排序，排序和选择）行。通常，当有数据更新时，将删除所有选择并丢失订单。

我已经创建了一个包含我的数据的本地商店，我将其作为对我的表的引用传递并更新如下：

setStrategies(newStrategies) {
        if (this.state.strategies.length == 0) {
            newStrategies.forEach(strategy => {
                this.state.strategies.push(strategy)
            });
        } else {
            this.state.strategies.forEach(strategy => {
                var newStrategy = newStrategies.find(x => x.strategyName === strategy.strategyName);
                strategy.status = newStrategy.status;
                strategy.lastPingTime = newStrategy.lastPingTime;
            });
        }

它有效，但我认为它过于复杂。那么你能告诉我什么是最好的方法，或者可能是可以自动绑定的表组件？

Answer 1

您可以在Vue中使用keys列表中的项目。这将处理列表的刷新和重用和重新排序现有元素。

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

正如文档中所述：

当Vue更新使用v-for呈现的元素列表时，默认情况下它使用“就地补丁”策略。如果数据项的顺序已更改，则Vue将移动DOM元素以匹配项的顺序，而不是就地修补每个元素，并确保它反映应该在该特定索引处呈现的内容。

此默认模式效率很高，但只有当列表呈现输出不依赖于子组件状态或临时DOM状态（例如表单输入值）时才适合。

为Vue提供一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供唯一的key属性。 key的理想值是每个项目的唯一ID。

Answer 2

我不了解您发布的代码，但我会将源数组和过滤器以及列排序为本地商店中的页面状态。然后，在vue组件上创建一个计算属性，对源数组进行排序和排序。每次更换源数组时，计算属性都将更新。您可能还想查看vue-keep-scroll，因此用户在页面上的位置会在更新中保留。

Answer 3

我没有减少其他答案的价值，但我发现 Vuetify 表确实符合我的要求。

Vue表实时更新

3 个答案: