el table plus

el-table-plus

基於el-table的配置化元件

背景：使用element el-table時，總是會書寫過多的template模板程式碼，使得頁面html程式碼過多。從應用層看element元件庫，雖然api設計的十分靈活，但使用起來十分繁瑣。所以需要將el-table包裝，簡化相關配置。

應用層api設計比較好的，推薦antd-design-vue table,el-table-plus api設計就參考了antd-design-vue table元件，底層渲染依然沿用element-ui table元件。同時全屬性/事件支援原element table元件，不會破壞原有的api（無侵入）；同時支援slot/jsx/h函數三種方式自訂渲染列數據，實現自訂業務邏輯渲染；同時集成常用的pagination元件以及擴充api，幫助便捷處理常用業務。

線上案例

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

特點

1. 簡單的使用方式，只需要data和column兩個屬性即可支持
2. 全繼承，element-ui全屬性/事件繼承
3. 高擴展，支援slot/jsx/h函數三種方式自訂渲染列數據
4. 更便捷，擴充scroll事件、pagination元件、fn快速格式化

安裝和引入

安裝

yarn add @springleo/el-table-plus

引入

此組件依賴element-ui的el-table組件，需要自行引入。

 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 ) 

基本使用

 < 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
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' }

Vue plugin series

Plugin	Status	Description
@springleo/el-dialog-helper		Promisify dialogs in Vue!
@springleo/el-table-plus		基於el-table的配置化元件
@springleo/el-form-plus		schema form base on element-ui form
@springleo/virtual-scroll-table		無限下拉虛擬滾動table組件

License

MIT