hoc element table

@hoc-element/таблица

? table на основе Webpack 5, <el-xxx> в Vue 3. Достижение более высокой степени свободы направлено на сокращение повторяющихся операций и повышение эффективности разработки.

Эту библиотеку компонентов можно использовать для обучения, справочной информации и вторичной разработки.

Живая демонстрация

Версия

• Версия Vue 3.x | Версия Vue 2.x

Скриншот

Поддержка окружающей среды

• Версия 3.2.x

Установить

npm install @hoc-element/table

# or

pnpm add @hoc-element/table

Быстрый старт

• Пожалуйста, установите element-plus перед использованием

 import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import HocElTable from '@hoc-element/table'
import App from './App.vue'

createApp ( App )
  . use ( ElementPlus )
  . use ( HocElTable )
  . mount ( '#app' ) 

Журнал изменений

Подробные изменения для каждого выпуска описаны в примечаниях к выпуску.

Особенность

• Построен на Webpack 5.
• Полная поддержка Vue 3.
• Поддерживает быструю настройку сериализованных таблиц JSON
• Pagination встроена
• Поддержка пользовательских имен столбцов prop
• Поддерживает настраиваемый рендеринг содержимого ячейки [см. инструкции по настройке рендеринга ячеек]
• Поддержка пользовательского style ячейки
• Поддержка привязки пользовательских directives
• Поддержка привязки Events и Methods встроенной Table element-plus
• Поддержка отображения и управления скрытием Header и Pagination

Инструкции по настройке рендеринга ячеек

метод	иллюстрировать	сцена
---	Отобразите значение ключа, соответствующее attrs.prop ячейки.	Подходит для непосредственного отображения значения реквизита
оказывать	визуализировать строку	Подходит для сценариев, в которых некоторая микрообработка выполняется со значением свойства по умолчанию.
рендерHTML	Отобразить указанный элемент DOM	Подходит для отображения действия, обычно используемого в последнем столбце (в настоящее время поддерживается только отрисовка электронной кнопки, подробности см. в разделе «Пример»).
компонент рендеринга	компонент рендеринга	Подходит для сценариев, в которых сложное содержимое должно отображаться в ячейках. Подробности см. в разделе «Пример».

Пример

Это относительно полный пример, охватывающий практически все варианты использования API. Исходный код находится здесь: Код.

Развертывать

Видите репозиторий hoc-element-table-build?