vue-el-table-pro v1.0.7

vue-el-table-pro

基于el-table的配置化组件

背景：使用element el-table时，总要书写过多的template模板代码，使得页面html代码过多。从应用层看element组件库，虽然api设计的十分灵活，但使用起来十分繁琐。所以需要对el-table进行包装，简化相关配置。

应用层api设计比较好的，推荐antd-design-vue table,vue-el-table-pro api设计就参考了antd-design-vue table组件，底层渲染依然沿用element-ui table组件。同时全属性/事件支持原element table组件，不会破坏原有的api（无侵入）；同时支持slot/jsx/h函数三种方式自定义渲染列数据，实现自定义业务逻辑渲染；同时集成常用的pagination组件以及扩展api，帮助便捷处理常用业务。

在线案例

https://ganp1020.github.io/vue-el-table-pro

特点

1. 简单的使用方式，只需要data和column两个属性即可支持
2. 全继承，element-ui全属性/事件继承
3. 高扩展，支持slot/jsx/h函数三种方式自定义渲染列数据
4. 更便捷，扩展scroll事件、pagination组件、fn快捷格式化

安装和引入

安装

yarn add vue-el-table-pro

引入

该组件依赖element-ui的el-table组件，需要自行引入。

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

import VueElTablePro from 'vue-el-table-pro'
Vue.use(VueElTablePro)

基本使用

<template>
    <vue-el-table-pro
      :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

vue-el-table-pro 属性

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

vue-el-table-pro 事件

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

columns 属性

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

License

MIT