Попытка решить проблему производительности с таблицей vuejs - PullRequest
Новая
       24

Попытка решить проблему производительности с таблицей vuejs

0 голосов
/ 02 января 2019

Итак, у меня есть таблица с 50 столбцами и примерно 4-600 строками с низкой производительностью.Есть некоторые вычисленные свойства в использовании.Ячейки таблиц - это входные данные, select и textareas.

Я использую vue-scrolling-table , потому что мне нужна вертикальная и горизонтальная прокрутка и фиксированный первый столбец.Но производительность действительно плохая.

У меня тоже есть такая же настройка, где-то еще приложение, но у него нет тех же проблем с производительностью.

Я уже пытался использовать виртуальный список , но я не мог заставить его работать с таблицей vue-scrolling / (заголовок не следовал за прокруткой, а вертикальный скроллер был доступен только при прокрутке вниз) Я также посмотрел на виртуальный скроллер но он рекомендовал не использовать с входами и тому подобным, поскольку он заменяет данные внутри входа и вызывает событие изменения и т. Д.

У меня есть v-for, который проходит черезданные, и один v-для внутри, для подмножества в столбцах.(Я не уверен, сколько будет столбцов.) 

<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
    })
}

Это должно работать нормально.Данные, с которыми я работаю, не настолько велики, что могут вызвать проблемы.Я пытаюсь что-то сделать в этом, и процессор вращается до 100%, и все происходит с задержками в 2 с.

Также одна интересная вещь, которую я обнаружил, выбор открывает через 3 секунды.Я подумал, что это любопытно.

Когда я использовал виртуальный список, производительность была лучше, но мне нужно какое-то другое решение для таблицы.

У кого-нибудь есть идея, в чем разница между этим?и мой другой, который работает просто отлично (больше данных и больше вычисляемых свойств на самом деле). Так что, я думаю, разница может быть в выборках и v-for, отображаемых столбцами (около 20 из них отображены таким образом).Или, может быть, текстовые зоны?

Заранее спасибо!

...