All Projects → pdsuwwz → hoc-element-table

pdsuwwz / hoc-element-table

Licence: MIT license
📦 A Vue 3.x Table Component built on Webpack 5

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects

Projects that are alternatives of or similar to hoc-element-table

vue-next-admin
🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等,适配手机、平板、pc 的后台开源免费模板库(vue2.x请切换vue-prev-admin分支)
Stars: ✭ 1,002 (+3753.85%)
Mutual labels:  element, element-ui, vue3, element-plus
Vue Admin Beautiful
🚀🚀🚀vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
Stars: ✭ 10,968 (+42084.62%)
Mutual labels:  element, element-ui, vue3, element-plus
vue3-admin
🔥 🎉 Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统
Stars: ✭ 1,471 (+5557.69%)
Mutual labels:  element, element-ui, vue3, element-plus
vue-admin-better
🚀🚀🚀vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus,vue admin plus,vue admin pro
Stars: ✭ 12,962 (+49753.85%)
Mutual labels:  element, element-ui, vue3, element-plus
Xcui
🍴 A Vue.js 2.x desktop components colletion
Stars: ✭ 88 (+238.46%)
Mutual labels:  vue-components, vue2, component-library
Element Plus
🎉 A Vue.js 3 UI Library made by Element team
Stars: ✭ 12,986 (+49846.15%)
Mutual labels:  vue-components, component-library, element-ui
vue-willtable
An editable table component for Vue.js 2.0
Stars: ✭ 119 (+357.69%)
Mutual labels:  table, vue-components, element-ui
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+1569.23%)
Mutual labels:  element, vue-components, vue2
D2 Admin Pm
基于 d2-admin的RBAC权限管理解决方案
Stars: ✭ 409 (+1473.08%)
Mutual labels:  element, vue2, element-ui
element-table
An extended table to integration with bootstrap-table and element-ui.
Stars: ✭ 18 (-30.77%)
Mutual labels:  table, element, element-ui
chusho
A library of bare & accessible components and tools for Vue.js 3
Stars: ✭ 47 (+80.77%)
Mutual labels:  vue-components, component-library, vue3
Different-UI
✨ A Vue.js 3 UI Library — a Toy
Stars: ✭ 62 (+138.46%)
Mutual labels:  vue-components, component-library, vue3
v-pip
🖼 Tiny vue wrapper for supporting native picture-in-picture mode.
Stars: ✭ 30 (+15.38%)
Mutual labels:  vue-components, vue2, vue3
vue3.0-template-admin
本项目基于vue3+ElementPlus+Typescript+Vite搭建一套通用的后台管理模板;并基于常见业务场景,抽象出常见功能组件;包括动态菜单,菜单权限、登录、主题切换、国际化、个人中心、表单页、列表页、复制文本、二维码分享等等
Stars: ✭ 500 (+1823.08%)
Mutual labels:  element-ui, vue3, element-plus
vite-vue3-lowcode
vue3.x + vite2.x + vant + element-plus H5移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具
Stars: ✭ 1,309 (+4934.62%)
Mutual labels:  element-ui, vue3, element-plus
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+9026.92%)
Mutual labels:  table, vue-components, vue2
electron-admin-element-vue
Electron Vue3.x Element-UI Admin
Stars: ✭ 37 (+42.31%)
Mutual labels:  element-ui, vue3, element-plus
v-intl
Add i18n to your awesome Vue 3 app 🔉
Stars: ✭ 13 (-50%)
Mutual labels:  vue-components, vue2, vue3
vue-elementui-freedomen
elementui 应用级框架
Stars: ✭ 27 (+3.85%)
Mutual labels:  table, element-ui
vue-flag-icon
a vue compoment for flag-icon-css
Stars: ✭ 64 (+146.15%)
Mutual labels:  vue-components, vue2

@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 原生 TableEventsMethods
  • 支持 HeaderPagination 的显隐控制

单元格渲染配置说明

方法 说明 场景
--- 渲染单元格的 attrs.prop 对应的键值 适用于直接显示 prop 的值场景
render 渲染字符串 适用于对默认 prop 的值做一些微处理的场景
renderHTML 渲染指定的 DOM 元素 适用于展示 Action,一般用在最后一列(目前只支持 el-button 的渲染,详见 Example)
renderComponent 渲染组件 适用于单元格内需要展示复杂内容的场景,详见 Example

Example

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

Deploy

见仓库 📥 hoc-element-table-build

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].