@springleo/el-table-plus

el-table-plus

Install

yarn add @springleo/el-table-plus

Online Example

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

Quick Start

Import modules and set up settings in main.js:

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

use <el-table-plus> in your page

<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 属性

支持el-table上所有原有属性，同时扩展以下api。

参数	类型	默认值	说明
loading	Boolean	false	动效loading
data	Array	[]	列表数据
columns	Array	[]	column item配置列表，详细见如下columns Attrs
pagination	Object		翻页器配置，默认未设置，不显示翻页器。相关api可查看el-pagination
total	Number	0	翻页器条数总数

el-table-plus 事件

支持el-table上所有原有事件，同时扩展以下api。

事件名称	说明	Description
scroll	table滚动条事件	e
page-change	翻页器改变事件	{ pageSize, currentPage }

columns 属性

支持el-table-column所有原有属性、Scoped Slot,同时扩展以下api：

Attr	Type	Default	Description
label	String		列名称
prop	String		列数据字段，支持多层对象嵌套，如user.email.prefix
fn	Function		格式化列。函数参数(value, row, column, $index)
hidden	Boolean		是否隐藏该列。建议是一个computed，使得可以响应式显示隐藏
customRender	Function		自定义列数据渲染。函数参数(value, row, column, $index, h)，支持jsx和h函数
customTitle	Function		自定义列头部渲染。函数参数(column, $index, h)，支持jsx和h函数
scopedSlots	Object		使用slot方式自定义渲染，替换customRender/customTitle函数。比如：{ customRender: 'slotName1', customTitle: 'slotName2' }

License

MIT