el table plus

эль-таблица-плюс

Конфигурируемые компоненты на основе el-table

Справочная информация: при использовании элемента el-table необходимо написать слишком много кода шаблона, что приводит к слишком большому количеству HTML-кода на странице. Если посмотреть на библиотеку компонентов элементов с уровня приложения, то, хотя конструкция API очень гибкая, ее очень сложно использовать. Поэтому el-table необходимо упаковать для упрощения связанных конфигураций.

Дизайн API прикладного уровня относительно хорош. Мы рекомендуем таблицу antd-design-vue. Дизайн API el-table-plus относится к компоненту таблицы antd-design-vue. Базовый рендеринг по-прежнему использует компонент таблицы element-ui. В то же время все атрибуты/события поддерживают исходный компонент таблицы элементов, который не разрушает исходный API (без вмешательства), он также поддерживает функцию slot/jsx/h для настройки рендеринга данных столбца тремя способами для достижения пользовательских настроек; рендеринг бизнес-логики также интегрирован. Часто используемые компоненты нумерации страниц и расширенные API помогают удобно управлять обычным бизнесом.

Онлайн-кейс

https://lq782655835.github.io/el-table-plus

Функции

1. Простое использование, для поддержки необходимы только два атрибута данных и столбец.
2. Полное наследование, полное наследование атрибутов/событий element-ui
3. Высокая масштабируемость, поддержка функции slot/jsx/h для настройки данных столбца рендеринга тремя способами.
4. Более удобное расширение события прокрутки, компонент нумерации страниц, быстрое форматирование.

Установка и введение

Установить

yarn add @springleo/el-table-plus

представлять

Этот компонент зависит от компонента el-table элемента-ui и должен быть введен вами самостоятельно.

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus ) 

Основное использование

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template > 

API

атрибут el-table-plus

Поддерживает все исходные атрибуты el-table и расширяет следующие API.

параметр	тип	значение по умолчанию	иллюстрировать
загрузка	логическое значение	ЛОЖЬ	Загрузка анимации
данные	Множество	[]	Список данных
столбцы	Множество	[]	Список конфигурации элементов столбца. Подробности см. в столбцах Attrs ниже.
нумерация страниц	Объект		Конфигурация переворачивателя страниц не установлена ​​по умолчанию, переворачиватель страниц отображаться не будет. Сопутствующие API можно найти на странице el-pagination.
общий	Число	0	Общее количество перевернувших страницы

событие el-table-plus

Поддерживает все исходные события в el-table и расширяет следующие API.

название события	иллюстрировать	Описание
прокрутка	Событие полосы прокрутки таблицы	е
смена страницы	Событие изменения перелистывания страниц	{ размер страницы, текущая страница }

атрибут столбцов

Поддерживает все исходные атрибуты и интервал области действия el-table-column и расширяет следующие API:

Атрибут	Тип	По умолчанию	Описание
этикетка	Нить		Имя столбца
опора	Нить		Поля данных столбца поддерживают многоуровневую вложенность объектов, например user.email.prefix.
скрытый	логическое значение		Скрывать ли этот столбец. Это предложение является вычисляемым и обеспечивает быстрое отображение и скрытие.
customRender	Функция		Отрисовка данных пользовательского столбца. Параметры функции (значение, строка, столбец, $index, h), поддержка функций jsx и h.
CustomTitle	Функция		Пользовательский рендеринг заголовков столбцов. Параметры функции (столбец, $index, h), поддержка функций jsx и h.
область видимостиSlots	Объект		Используйте режим слота для настройки рендеринга и замены функции customRender/customTitle. Например: { customRender: 'slotName1', customTitle: 'slotName2' }

Серия плагинов Vue

Плагин	Статус	Описание
@springleo/el-dialog-helper		Диалоги Promiseify в Vue!
@springleo/el-table-plus		Конфигурируемые компоненты на основе el-table
@springleo/el-form-plus		Форма схемы на основе формы element-ui
@springleo/virtual-scroll-table		Компонент таблицы виртуальной прокрутки с бесконечным раскрывающимся списком

Лицензия

Массачусетский технологический институт