1

所以我有一个有 50 列和大约 4-600 行的表，性能很差。有一些计算属性正在使用中。表格单元格是输入、选择和文本区域。

我使用vue-scrolling-table，因为我需要垂直和水平滚动，并固定第一列。但是性能真的很差。

我也有相同的设置，其他地方是应用程序，但它没有相同的性能问题。

我已经尝试使用虚拟列表，但我无法让它与 vue-scrolling-table/ 一起使用（标题没有跟随滚动，只有当我滚动到底部时垂直滚动条才可用）我还查看了虚拟滚动条，但建议不要与输入等一起使用，因为它正在替换输入中的数据，这会触发更改事件等。

我有一个 v-for，它遍历数据，一个 v-for 在里面，用于列中的一个子集。（我不能确定会有多少列。）

<template slot="tbody">
    <tr v-for="(row,index) in table" :key="index">
        <td>
            <input v-model="table[index].someItem">
        </td>
        <td>
            <select v-model="listyThing">
                <option v-for="item in list">{{item}}<option>
             </select>
        </td>
  ...


# I have some computed stuff ,(like 4)
SomeComputedFunction: function() {
    return this.table.map((row) => {
        return row.some * row.somethingelse
    })
}

这应该可以正常工作。我正在使用的数据不是那么大，它应该会导致问题。我尝试在这方面做任何事情，cpu 旋转到 100%，一切都发生了 2 秒的延迟。

我还发现了一件有趣的事情，选择会在 3 秒内打开。我觉得这很好奇。

当我使用虚拟列表时，性能更好，但我需要一些其他的表解决方案。

有谁知道这和我的另一个之间有什么区别，它工作得很好（实际上更多的数据和更多的计算属性）所以我认为区别可能是选择和 v-for 渲染列（大约 20其中以这种方式呈现）。或者也许是文本区域？

提前致谢！

4

0 回答 0