hoc element table

@HOC-ELEMENT/TABLE

• Based on Webpack 5 constructed, it constitutes Vue 3.x. The Table in the Element-Plus library is encapsulated in the secondary time. The table table can be generated by configured the <el-xxx> . To achieve higher degrees of freedom, it aims to reduce duplicate operations and make development more efficient.

This component library is available for learning, reference and for secondary development

Live demo

Version

• Vue 3.x version ｜ Vue 2.x version

Screenshot

Environment support

• Vue 3.2.x

Install

npm install @hoc-element/table

# or

pnpm add @hoc-element/table

Quick start

• Please install Element-Plus before use

 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

• Based on Webpack 5
• Fully support VUE 3
• Support JSON serialization table for fast configuration
• Paginated pagination has been built -in Pagination
• Support prop name
• Support cell content custom rendering [see the unit of rendering configuration instructions]
• Support custom cell style
• Support binding custom instruction directives
• Supported element-plus native Table Events and Methods
• Support the hidden control of Header and Pagination

Unit grid rendering configuration description

method	illustrate	Scene
---	The key value corresponding to the ATTRS.prop of the rendering unit	Applicable to the value scene that directly displays the problem
render	Rendering string	Applicable to some micro -processing scenarios for the value of the default PROP
RenderHtml	Rendering specified DOM elements	It is suitable for display ACTION, which is generally used in the last column (currently only supports EL-Button's rendering, see Example for details)
Rendercomponent	Rendering component	Applicable to the scenario that needs to be displayed in the cell, see Example for details

Exmple

This is a relatively full example, almost all the usage of API, the source code poke this: code

Deploy

See the warehouse? HOC-ELEMENT-Table-BUILD