@hoc-element/table

📦 A Vue3.x Table Component built on Webpack 5 that follows the Configuration
1,209 38
vue table element-plus 表格 hoc 组件化 高阶组件
Install
npm install @hoc-element/table
Latest Version:2.2.0
Vue:3
Older releases:2
License:MIT
Last Updated:Oct 26, 2026
Links: GitHub  ·  npm
Maintainer: hoc-element-plus

@hoc-element/table

npm license

📦 基于 Webpack 5 构建，重构成 Vue 3.x，二次封装了 element-plus 库中的 table，通过配置文件的方式即可生成 table 表格, 无需再写大量的诸如 <el-xxx> 的模板，实现更高的自由度，旨在减少重复的操作，让开发变得更高效。

Live demo

Version

Screenshot

image

Environment Support

  • Vue 3.2.x

Install

npm install @hoc-element/table

# or

pnpm add @hoc-element/table

Quick Start

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

Example

这是比较全的例子，几乎囊括了 API 的所有用法，源码戳这： Code

Deploy

见仓库 📥 hoc-element-table-build

Related Packages

ztz-table

ZTZ Table，一个为开发者准备的基于 Vue 3.0 和 Element Plus 的数据表格二次封装的组...

753 1
element-plus vue 组件化 表格 高阶组件 crud element-ui vue-table vue3 ztz-table
element-plus-table-dragable

A directive what used sortablejs to add drag support for element-plus's table co...

19,522 14
element-plus table dragable vue3
ez-tables

Vue3 + Element Plus table components (Table, TableActionDropdown & TableQueryWra...

1,417
element-plus table data-table vue3
naive-ui-table

基于naive-ui封装的表格组件

1,359
table 表格 naive-ui vue3
@hoc-element/affix

📌 Affix 将页面元素固定在可视范围内。

2,569 8
hoc vue 组件化 affix 固钉

Version History

Version Released Vue License
2.2.0 >=3.2.0 MIT
2.0.0 >=3.2.0 MIT
1.0.1 >=3.2.0 MIT
1.0.0 >=3.2.0 MIT
0.2.6 >=2.6.0 MIT