el table plus

El-Table-Plus

Configuration component based on EL-Table

Background: When using Element El-Table, you always have to write too much Template template code to make the page HTML code too much. Looking at the Element component library from the application layer, although the API design is very flexible, it is very cumbersome to use. Therefore, you need to pack El-Table to simplify the related configuration.

The application layer API design is better. It is recommended that Antd-Design-Vue Table, El-Table-Plus API design refers to the Antd-Design-Vue Table component. The underlying rendering still uses Element-UI Table components. At the same time, all attributes/events support the original Element Table component, and will not destroy the original API (no invasion); at the same time, the SLOT/JSX/H function can be customized to customize the rendering data to achieve customized business logic rendering; at the same time integrated integration Common Pagination components and extended APIs help conveniently handle common businesses.

Online case

https://lq782655835.github.io/el-table- plus

Characteristic

1. Simple use method, only Data and Column attributes are required to support
2. All inheritance, Element-UI full attribute/event inheritance
3. High extension, supports three ways of Slot/JSX/H function to customize rendering data
4. More convenient, expand the Scroll event, Pagination component, FN Express Format

Installation and introduction

Install

yarn add @springleo/el-table-plus

Introduce

This component relies on EL-Table components of Element-UI and needs to be introduced by itself.

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus ) 

Basic use

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template > 

API

El-Table-Plus attribute

Support all the original attributes on El-Table, and expand the following APIs.

parameter	type	default value	illustrate
loading	Boolean	False	Motion effect loading
Data	Array	[]	List data
columns	Array	[]	Column item configuration list, see the following Columns Attrs
pagination	Object		The page turning device configuration is not set default, and the page turning device is not displayed. Related APIs to view EL-PAGINATON
Total	Number	0	Total number of pages over pages

El-Table-Plus event

Support all the original events on El-Table, and expand the following APIs.

Event name	illustrate	Description
scroll	Table rolling bar event	E
Page-Change	Character change event	{PAGESIZE, CurrentPage}

columns attribute

Support El-Table-Column all original attributes, scopeed slots, and expand the following API at the same time:

ATTR	Type	Default	Description
label	String		Column name
propop	String		Column data fields support multi -layer nested nesters, such as user.email.prefix
hidden	Boolean		Whether to hide this column. The recommendation is a computed, so that the response display can be hidden
CUSTOMRENDER	Function		Custom column data rendering. Function parameters (Value, ROW, Column, $ Index, H), support JSX and H function
CUSTOMTITLE	Function		Customized the head rendering. Function parameters (Column, $ Index, H), support JSX and H function
scopeedslots	Object		Use the slot method to customize rendering to replace the Customrender/Customtitle function. For example: {Customrender: 'SlotName1', Customtitle: 'SlotName2'}

Vue plugin server

Plugin	Status	Description
@Springleo/El-Dialog-Helper		Promisify Dialogs in Vue!
@Springleo/El-Table-Plus		Configuration component based on EL-Table
@Springleo/El-Form-Plus		SCHEMA FORM BASE on Element-UI FORM
@Springleo/Virtual-Scroll-Table		Unlimited pull -down virtual rolling table component

License

Mit