VueCraft NPM

Выбор строк ​

useRowSelection() — выбор строк кликом/Shift+клик, не зависящий от структуры данных — работает с VirtualList, VirtualTable или любым обычным массивом. Не привязан к конкретному компоненту: сочетайте isSelected/toggle с той областью видимости слота индекса строки, которую предоставляет ваш компонент.

ts
function useRowSelection<T>(options: UseRowSelectionOptions<T>): UseRowSelectionReturn<T>

Опции ​

items ​

Ref<T[]> | ComputedRef<T[]>

Реактивный массив элементов.

getKey ​

(item: T, index: number) => string | number · по умолчанию: item.id ?? index

Идентичность, используемая для набора выбранных.

multiple ​

boolean · по умолчанию: true

false ограничивает выбор одной строкой; новый вызов toggle заменяет выбор вместо добавления к нему.

Возвращаемое значение ​

selectedKeys ​

Readonly<Ref<Set<string | number>>>

Текущие выбранные ключи.

selectedItems ​

ComputedRef<T[]>

Текущие выбранные элементы, производные от items + selectedKeys.

isSelected ​

(item: T, index: number) => boolean

Выбрана ли строка.

toggle ​

(item: T, index: number, event?: MouseEvent | KeyboardEvent) => void

Переключить строку. event.shiftKey заполняет диапазон от последней переключённой строки до текущей (соглашение чекбоксов Gmail), поверх уже выбранного.

selectAll ​

() => void

Выбрать все строки в items.

clearSelection ​

() => void

Очистить выбор и сбросить якорь shift-диапазона.

Пример ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { VirtualList, useRowSelection } from 'vue-virtual-scroller-kit'

interface Row {
  id: number
  label: string
}
const items = ref<Row[]>(Array.from({ length: 1000 }, (_, i) => ({ id: i, label: `Row ${i + 1}` })))

const selection = useRowSelection<Row>({ items })
</script>

<template>
  <VirtualList :items="items" key-field="id" :estimated-item-size="40" style="height: 500px">
    <template #default="{ item, index }">
      <label>
        <input
          type="checkbox"
          :checked="selection.isSelected(item, index)"
          @click="selection.toggle(item, index, $event)"
        />
        {{ item.label }}
      </label>
    </template>
  </VirtualList>
  <p>{{ selection.selectedItems.value.length }} selected</p>
</template>

Клик переключает одну строку на месте; Shift+клик заполняет диапазон от последней переключённой строки. Для VirtualTable сочетайте это с index, теперь доступным в слоте #cell — см. пример выбора строк на странице VirtualTable.