Таблица

Таблица данных. Поддерживаются сортировка (управляемая / неуправляемая), фильтрация столбцов, перетаскивание ширины столбцов, многоуровневые заголовки (бесконечная вложенность children) и фиксированные столбцы; при заданном height включается виртуальная прокрутка (rowHeight должен совпадать с фактической высотой строки).

Таблица

<template>
  <div style="max-width: 760px">
    <p class="demo-note">size="small" + maxHeight + сортировка по умолчанию (defaultSortProp/defaultSortOrder) + фильтрация</p>
    <LhTable
      :data="rows"
      :columns="columns"
      size="small"
      stripe
      border
      :max-height="200"
      row-key="name"
      default-sort-prop="dynasty"
      default-sort-order="asc"
      :default-filtered-values="{ dynasty: ['Сун'] }"
    >
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">Столбец «Династия» по умолчанию отсортирован по возрастанию и предфильтрован по значению «Сун»; условия можно изменить кнопкой фильтра в заголовке.</p>
    <p class="demo-note" style="margin-top: 16px">Вложенный заголовок (children) + перетаскивание ширины (resizable) + formatter + пользовательский sorter</p>
    <LhTable :data="rows2" :columns="groupColumns" border :height="180" :row-height="40" :sorter="dynastySorter">
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">Столбец «Происхождение» форматируется функцией formatter в «Дворц. коллекция / Частная коллекция»; ширину столбца «Оценка» можно менять перетаскиванием (resizable).</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    rows: [
      { name: 'Путешествие по горам и рекам', dynasty: 'Сун', price: 1800 },
      { name: 'Жилище в горах Фучунь', dynasty: 'Юань', price: 2600 },
      { name: 'Тысяча ли рек и гор', dynasty: 'Сун', price: 3200 },
      { name: 'Праздник Цинмин на реке', dynasty: 'Сун', price: 1500 },
      { name: 'Ночной пир Хань Сицзая', dynasty: 'Пять династий', price: 2100 },
    ],
    rows2: [
      { name: 'Путешествие по горам и рекам', dynasty: 'Сун', provenance: 'Дворц. коллекция', price: 1800 },
      { name: 'Жилище в горах Фучунь', dynasty: 'Юань', provenance: 'Дворц. коллекция', price: 2600 },
      { name: 'Праздник Цинмин на реке', dynasty: 'Сун', provenance: 'Дворц. коллекция', price: 1500 },
      { name: 'Светлый белый Чжао Е Бай', dynasty: 'Тан', provenance: 'Частная коллекция', price: 980 },
    ],
    columns: [
      { prop: 'name', label: 'Произведение', width: 160 },
      {
        prop: 'dynasty',
        label: 'Династия',
        width: 120,
        sortable: true,
        filters: [
          { text: 'Сун', value: 'Сун' },
          { text: 'Юань', value: 'Юань' },
          { text: 'Пять династий', value: 'Пять династий' },
        ],
      },
      { prop: 'price', label: 'Оценка (в 10 тыс.)', width: 140, align: 'right', slot: 'price' },
    ],
    groupColumns: [
      {
        label: 'Сведения о коллекции',
        children: [
          { prop: 'name', label: 'Произведение', width: 150 },
          {
            prop: 'provenance',
            label: 'Происхождение',
            width: 100,
            formatter: (r) => (r.provenance === 'Дворц. коллекция' ? 'Дворц. коллекция' : 'Частная коллекция'),
          },
        ],
      },
      {
        label: 'Оценка',
        children: [
          { prop: 'dynasty', label: 'Династия', width: 90, sortable: true },
          { prop: 'price', label: 'Оценка (в 10 тыс.)', width: 130, align: 'right', resizable: true, slot: 'price' },
        ],
      },
    ],
  }),
  methods: {
    dynastySorter(a, b) {
      const order = ['Тан', 'Пять династий', 'Сун', 'Юань']
      return order.indexOf(String(a.dynasty)) - order.indexOf(String(b.dynasty))
    },
  },
}
</script>

Props

Проп	Описание	Тип	По умолчанию
data	Данные строк	LhTableRow[]	[]
columns	Конфигурация столбцов	LhTableColumn[]	[]
height	Высота тела таблицы (при задании включается виртуальная прокрутка; число — px)	number \| string	—
maxHeight	Максимальная высота в невиртуальном режиме	number \| string	—
rowHeight	Высота строки при виртуальной прокрутке (должна совпадать с фактической высотой строки)	number	—
stripe / border	Зебра / границы ячеек	boolean	false
size	Размер	'small' \| 'default' \| 'large'	'default'
rowKey	Имя поля-ключа строки	string	—
defaultSortProp / defaultSortOrder	Столбец / направление сортировки по умолчанию	string / LhTableSortOrder	—
sorter	Пользовательская функция сортировки	(a, b) => number	—
resizable	Включить перетаскивание ширины столбцов (требуется сочетание с column-уровневым resizable, и столбец должен иметь числовой width)	boolean	false
defaultFilteredValues	Состояние фильтра по умолчанию (неуправляемое; ключи — prop столбцов)	Record<string, (string \| number)[]>	—
filteredValues	Управляемое состояние фильтра (:filtered-values.sync)	Record<string, (string \| number)[]>	—
sx	Компактная раскладка через sx	—	—

Events

sortChange ({ prop, order }), filterChange ({ prop, values }), columnResize ({ prop, width }), update:filteredValues, rowClick (row, index)

Slots

Слот	Описание
<имя slot столбца>	Пользовательская ячейка, областные параметры { row, column, index, value } (столбец задаётся через column.slot)
empty	Содержимое при отсутствии данных (по умолчанию «Нет данных»)

Доступность

Заголовок — role="row" + aria-sort для сортируемых столбцов, тело таблицы — role="row"; панель фильтра — role="menu", рукоятке изменения ширины заданы aria-label и tabindex, поддерживается регулирование стрелками влево / вправо.