Производительность Vue + Vuetify
Итак, у меня есть таблица данных Vuetify с большим количеством элементов, мне нужно отобразить 50/100/150
элементов.
Проблема в том, что, когда у меня есть 50 элементов, требуется от 2 до 3 секунд, чтобы загрузить всю таблицу. Мой запрос занимает около 500 мс для загрузки и vue занимает 3 секунды для визуализации. Когда у меня есть 150 предметов, это занимает около 10 секунд.
Можно ли сократить время рендеринга хотя бы до 5 секунд с помощью 150 элементов?
Я использую эту таблицу: https://vuetifyjs.com/en/components/data-tables#data-tables
Мой код таблицы:
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
:items-per-page="50"
:footer-props="rowsPerPageItems"
>
<TableRow :row="item" v-for="item in clientList" :key="item.id">
</v-data-table>
</template>
// my clientList is async response from server
import { mapGetters } from "vuex";
export default {
data(){
return {
rowsPerPageItems: [50, 100, 150]
}
},
computed: {
...mapGetters["clientList"] // this comes from vuex, I don't think it's relevant. It returns about 400 client info
}
}
<!-- My component TableRow -->
<template>
<tr>
<td>
<v-checkbox v-model="row.checked" color="primary"></v-checkbox>
</td>
<td>{{ row.data }}</td>
<td>{{ row.name }}</td>
<td>
<!-- This is a jQuery plugin, I need it to keep track of every key pressed -->
<Select2
:id="row.id.toString()"
:settings="{ minimumInputLength: 3, ajax: ajaxData, placeholder: labels.descriptionList[row.description] }"
@select="handleSelect2($event)"
/>
</td>
<td v-if="this.is_expense">
<v-select
:items="labels.categoryName"
:placeholder="labels.categoryList[row.category]"
@input="updateCashflow"
v-model="row.category"
dense
></v-select>
</td>
<td v-else></td>
<td>{{ row.amount }}</td>
</tr>
</template>
У вопроса есть решение - Посмотреть?

Источник

items-per-page-это параметр по умолчанию для отображения при загрузке, а rowsperpageitems-это параметры. В случае компонента, мне нужно, чтобы это был компонент, потому что мне нужно иметь доступ к данным каждой строки, чтобы изменить его я обновлю компонент здесь, я забыл srry
Источник

Вам не нужно делать это, чтобы получить доступ или изменить данные таблицы: редактирование содержимого
Источник

Источник

Источник

это не так, я попытался очистить каждый компонент и данные в side my TableRow и изменил его на статическую строку, и все еще занимает много времени для визуализации
Источник

если вы думаете, что это может быть проблемой, я попробую ее оптимизировать
Источник
Ответы - Производительность Vue + Vuetify / Vue + Vuetify performance

28.01.2020 06:17:52
Удалите этот компонент и прочитайте v-data-table
.
- Вы не должны добавлять
v-checkbox
, чтобы сделать его строки выбираемыми, используйтеshow-select
prop вместоv-model
наv-data-table
- Используйте
item.<name>
для добавления пользовательских компонентов в ячейки
Помочь в развитии проекта: