Фиксированная шапка и левая колонка
Для фиксации шапки указывается только пропс fix-header.
Для фиксации колонок надо указывать у нужной колонки поле fixed: true. Можно зафиксировать сразу несколько колонок.
Функционал фиксирования колонок будет работать при условии если появится скролл у таблицы, если данных не достаточно и скролла физически нет, то и фиксированных колонок тоже не будет.
Сортировка таблицы
Для сортировки нужных колонок нужно указывать в объекте колонки 2 свойства sortable: true и описать функцию сортировки onSort: this._onSort Так же не забыть указать свойство в самой таблице sortable
Expandable таблица
Для того чтобы была возможность разворачивание строк для отображения контента, надо добавить template и указать слот expandedRowRender
Внутрь шаблона передается scope свойство - record
Вложенные строки, дерево
Есть всего 2 условия построения дерева.
- Указать свойство
tree-key="title"где указывается название колонки, которая будет управляющим деревом. - Структура дочерних строк должна быть такая же, как и в родителе, для правильной отрисовки
Кастомизация таблицы
Кастомизация полей строк
Для кастомизации конкретного поля у строки, надо создать <template> и в качестве названия слота указывается название поля.
Например для поля description шаблон будет выглядить так <template #description="{ record, key }"> внутрь шаблона передается scope-props {record, key}
record - это сама строка со всеми данными
key - это поле key у строки
Кастомизация колонок в шапке
Внутренности ничем не отличаются от шаблона строк, только в названии слота добавляется префикс head-
Например <template #head-description="{ record, key }"> record - тут уже не строка, а объект с колонкой, , key - название поля, например description, title или id и.тп
Кастомизация без шаблонов
Для кастомизации нужного поля у строк или колонок предусмотрены функции:
customRender({ record, key, h })- функция вызывается для каждого поля указанного в колонке вkey: 'title', тутrecord- это контент строки,key- название поля, например description, title или id и т.п.columnCustomRender({ record, key, h })- функция вызывается для указанного поля в шапке, тутrecord- это конфиг колонки,key- название поля, например description, title или id и т.п.customRender,columnCustomRender- св-во может описано не как функция, а какstringназвание слота, бывает когда нужно одним шаблоном отрисовать несколько полей в таблице
Важно - функции рендера должны возвратить объект с ключем content { content: 'Готовый шаблон' }
Слежение за кликом и выбором строк
Чтобы подписаться за кликом строки или ее выбором в случае selectable или multiselectable у таблицы есть свойство :row-selection="rowSelection".
В computed компонента надо описать rowSelection метод который вернет объект с 3 функциями onClick, onSelect, onSelectAll.
В каждую из этих функций передается свойство key из объекта строк dataSource
Colspan строк
Есть функционал объединения колонок в строке. И он доступен при условии описания кастомной функции рендера с помощью customRender.
Функциия должна возравить объект вида { content: 'html content', attrs: { colspan: 5 } } где в атрибутах описывается какое кол-во колонок схлопнуть.
В примере можно глянуть условное схлопывание.
Редактируемые таблицы
Для редактируемых таблиц используется свойство editable, которое убирает необходимые отступы для помещения внутрь ячейки инпута.