Производительность Vue + Vuetify


Производительность Vue + Vuetify

28.01.2020 05:25:03 Просмотров 41 Источник

Итак, у меня есть таблица данных 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>
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59950891/vue-vuetify-performance#comment106021884_59950891
items-per-page-это параметр по умолчанию для отображения при загрузке, а rowsperpageitems-это параметры. В случае компонента, мне нужно, чтобы это был компонент, потому что мне нужно иметь доступ к данным каждой строки, чтобы изменить его я обновлю компонент здесь, я забыл srry
https://stackoverflow.com/questions/59950891/vue-vuetify-performance#comment106022094_59950891
Вам не нужно делать это, чтобы получить доступ или изменить данные таблицы: редактирование содержимого
https://stackoverflow.com/questions/59950891/vue-vuetify-performance#comment106022401_59950891
это не так, я попытался очистить каждый компонент и данные в side my TableRow и изменил его на статическую строку, и все еще занимает много времени для визуализации
https://stackoverflow.com/questions/59950891/vue-vuetify-performance#comment106022534_59950891
если вы думаете, что это может быть проблемой, я попробую ее оптимизировать

Ответы - Производительность Vue + Vuetify / Vue + Vuetify performance

Emīls Gulbis

28.01.2020 06:17:52

Удалите этот компонент и прочитайте v-data-table.

  1. Вы не должны добавлять v-checkbox, чтобы сделать его строки выбираемыми, используйте show-selectprop вместо v-modelна v-data-table
  2. Используйте item.<name>для добавления пользовательских компонентов в ячейки
https://stackoverflow.com/questions/59950891/vue-vuetify-performance/59951841#comment106028314_59951841
Я не понял твой номер 2
https://stackoverflow.com/questions/59950891/vue-vuetify-performance/59951841#comment106035731_59951841
Вы знаете, что такое слоты в Vue? В принципе, вы можете добавить дочерний элемент для <v-data-table>, который упакован с <template v-slot:item.[your-header-value-here]="{ item }">custom element {{item.id}}</template>
Помочь в развитии проекта:
Закрыть X