hoc element table

@hoc-element/table

? 基於Webpack 5 構建，重構成Vue 3.x，二次封裝了element-plus 庫中的table，通過配置文件的方式即可生成table表格, 無需再寫大量的諸如<el-xxx>的模板，實現更高的自由度，旨在減少重複的操作，讓開發變得更有效率。

此元件庫可供學習、參考及用於二次開發

Live demo

Version

• Vue 3.x 版本｜ Vue 2.x 版本

Screenshot

Environment Support

• Vue 3.2.x

Install

npm install @hoc-element/table

# or

pnpm add @hoc-element/table

Quick Start

• 使用前請安裝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' ) 

Changelog

Detailed changes for each release are documented in the release notes

Feature

• 基於Webpack 5 構建
• 全面支援Vue 3
• 支援JSON序列化表格快速配置
• 已內建Pagination分頁
• 支援自訂prop列名
• 支援單元格內容自訂渲染【請參閱單元格渲染配置說明】
• 支援自訂單元格style樣式
• 支援綁定自訂指令directives
• 支援綁定element-plus原生Table的Events和Methods
• 支持Header和Pagination的顯隱控制

單元格渲染配置說明

方法	說明	場景
---	渲染單元格的attrs.prop 對應的鍵值	適用於直接顯示prop 的值場景
render	渲染字串	適用於對預設prop 的值做一些微處理的場景
renderHTML	渲染指定的DOM 元素	適用於展示Action，一般用在最後一列（目前只支援el-button 的渲染，詳見Example）
renderComponent	渲染元件	適用於單元格內需要展示複雜內容的場景，詳見Example

範例

這是比較全的例子，幾乎囊括了API 的所有用法，源碼戳這： Code

Deploy

請參閱倉庫? hoc-element-table-build