0

使用 Vue，我有一个需要绑定到表的数据列表。我创建了一个计算属性，它将根据某些参数对列表进行过滤和排序。

最初，我将所有逻辑都放在一个文件中，效果很好，但速度很慢。我了解到为表数据创建组件可以提高性能，因此我采用了 v-for 循环并将每个项目推送到它自己的组件中。

这确实提供了一些性能提升，但现在我的排序功能已经停止工作。v-for 迭代计算属性，当数据更改顺序时，它不会重新排序 UI 中的对象列表。但检查控制台，列表确实改变了顺序。我需要做一些电话来重新绑定数据列表吗？我会考虑破坏和重新创建列表，但我正在努力提高性能。

                <thead class="tableHeader">
                    <tr>
                        <th @click="changeSort(header)" class="text-no-wrap" v-for="header in fields" scope="col" v-bind:key="header">
                            {{ header }} <i class="fa fa-sort" v-bind:class="{'fa-sort':sortTracker !=header, 'fa-sort-desc': (sortDirection=='2' && sortTracker==header),'fa-sort-asc': (sortDirection =='1' && sortTracker==header)}" />
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <div v-for="(protocol, index) in filterList" v-bind:key="index" class="data-row">
                        <MonitoringStatusListItem  class="data-row" v-if="hasAccess(protocol.ProtocolID,'Monitoring Status')" :protocol="protocol" />
                    </div>
                </tbody>
            </table>``
4

1 回答 1

0

为了提高性能，我认为您应该在渲染之前过滤列表。

前任：

computed: {
   monitoringProtocol() {
    return protocol.filter (item => hasAccess(protocol.ProtocolID,'Monitoring Status')
   }
}

模板：

<tbody>
    <div v-for="(monitoringProtocol, index) in filterList" v-bind:key="index" class="data-row">
        <MonitoringStatusListItem  class="data-row" :protocol="protocol" />
    </div>
</tbody>
于 2021-10-29T04:22:32.930 回答