Как исправить скорость отображения multiselect внутри таблицы?

Question

[Daniil161rus]

В проекте используется таблица с множественным выбором элементов (Element Plus). При выборе элементов в таблице в поле name и address появляются multi select компонент. Проблема заключается в том, что когда в таблице много элементов и я нажимаю на checkbox для выбора всего происходит глюк связанный с отображением multi select компонентов.
Как исправить/оптимизировать функционал?
Код

Comments

[VoidVolker]

Daniil161rus Код?

[Daniil161rus]

VoidVolker, https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6Ijxz...

[Daniil161rus]

VoidVolker,

<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'

const msg = ref('Hello World!')

const selected_table_items = ref([])

const name_options = [
  {id: 1, label: 'Name 1', value: 'name1'},
  {id: 2, label: 'Name 2', value: 'name2'},
  {id: 3, label: 'Name 3', value: 'name3'},
  {id: 4, label: 'Name 4', value: 'name4'},
  {id: 5, label: 'Name 5', value: 'name5'},
  {id: 6, label: 'Name 6', value: 'name6'},
  {id: 7, label: 'Name 7', value: 'name7'},
  {id: 8, label: 'Name 8', value: 'name8'},
  {id: 9, label: 'Name 9', value: 'name9'},
  {id: 10, label: 'Name 10', value: 'name10'},
]

const address_options = [
  {id: 1, label: 'Address 1', value: 'Address1'},
  {id: 2, label: 'Address 2', value: 'Address2'},
  {id: 3, label: 'Address 3', value: 'Address3'},
  {id: 4, label: 'Address 4', value: 'Address4'},
  {id: 5, label: 'Address 5', value: 'Address5'},
  {id: 6, label: 'Address 6', value: 'Address6'},
  {id: 7, label: 'Address 7', value: 'Address7'},
  {id: 8, label: 'Address 8', value: 'Address8'},
  {id: 9, label: 'Address 9', value: 'Address9'},
  {id: 10, label: 'Address 10', value: 'Address10'},
]

const handleSelectionChange = val => {
  selected_table_items.value = val
}

const tableData = [
  {
    id: 1,
    date: '2016-05-03',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 2,
    date: '2016-05-02',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 3,
    date: '2016-05-04',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 4,
    date: '2016-05-01',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 5,
    date: '2016-05-02',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 6,
    date: '2016-05-04',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 7,
    date: '2016-05-01',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 8,
    date: '2016-05-02',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 9,
    date: '2016-05-04',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 10,
    date: '2016-05-01',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 11,
    date: '2016-05-02',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 12,
    date: '2016-05-04',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 13,
    date: '2016-05-01',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 14,
    date: '2016-05-02',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 15,
    date: '2016-05-04',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 16,
    date: '2016-05-01',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 17,
    date: '2016-05-02',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 18,
    date: '2016-05-04',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
  {
    id: 19,
    date: '2016-05-01',
    name: ['Tom'],
    address: ['No. 189, Grove St, Los Angeles'],
  },
]
</script>

<template>
  <h1>{{ msg }}</h1>
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="40" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180">
      <template #default="scope">
      <span v-if="!selected_table_items.some(item => item.id === scope.row.id)">
        {{ scope.row.name.join(', ') }}
      </span>
        <el-select
          v-else
          v-model="scope.row.name"
          :key="scope.row.id"
          multiple
          collapse-tags
          :max-collapse-tags="4"
          :multiple-limit="50"
          style="width: 100%"
        >
          <el-option
            v-for="item in name_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="Address">
    <template #default="scope">
      <span v-if="!selected_table_items.some(item => item.id === scope.row.id)">
        {{ scope.row.address.join(', ') }}
      </span>
        <el-select
          v-else
          v-model="scope.row.address"
          :key="scope.row.id"
          multiple
          collapse-tags
          :max-collapse-tags="4"
          :multiple-limit="50"
          style="width: 100%"
        >
          <el-option
            v-for="item in address_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</template>

[Aetae]

А "глюк" то в чём конкретно?

Общие советы по оптимизации:
1. хранить дополнительно Set или объект с выбранными ключами, чтоб не делать каждый раз .some.
2. Вынести колонку в отдельный компонент:

<template #default="scope">
  <v-select-column :selected="selected_table_items_set.has(scope.row.id)" :name="scope.row.name"  :key="scope.row.id"/> 
</template>

v-select-column:

<template>
    <span v-if="!selected">
      {{ name.join(', ') }}
    </span>
      <el-select
        v-else
        v-model="name"
        multiple
        collapse-tags
        :max-collapse-tags="4"
        :multiple-limit="50"
        style="width: 100%"
      >
        <el-option
          v-for="item in name_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
</template>

[Daniil161rus]

Aetae, глюк заключается во времени загрузки компонентов el-select. Если прям много элементов в таблице, то вся страница зависает, пока не отрисует все el-select. Если вместо el-select, выводить просто текст, то зависания не происходит.

[Aetae]

Daniil161rus, в общем суть оптимизаций выше - разбивать всё на как можно больше подкомпонентов. Набор el-option тоже в подкомпонент можно. Каждую el-table-column - в свой компонент. И т.д.
Если это не поможет - возможно el-select сам по себе жирный. Можно во-первых задать ему фиксированную высоту, во-вторых задать фиксированную высоту строкам таблицы.
Если не поможет - посмотреть документацию el-select и el-table на предмет оптимизаций: зачастую жирные компоненты имеют специальные пропсы, которые отключают анимации, оптимизирую отрисовку и всё такое прочее.
Если не поможет - чтож, открываем исходники el-select и дебажим...

[Daniil161rus]

Aetae, понял вас, спасибо. Вот я тоже склоняюсь к тому, что придется в исходники лезть.. Буду пробовать