基於elementUI庫中table組件二次封裝

組件連接： github.com/ZYuMing/el-…

解決問題

在支持el-table組件已有功能的基礎上集成了排序，篩選，分頁，請求服務端數據等功能，具備更好的拓展性。(支持JSX)

組件參數

參數	說明	類型	可選值	默認值
mode	加載數據的方式	String	local/remote	local
url	服務端數據接口url	String	—	—
columns	表格每列數據的顯示配置	Srray	—	—
showPagingTool	是否顯示分頁組件	Boolean	—	false
size	每頁顯示條數	Number	—	-
showSelection	是否顯示錶格選擇框	Boolean	—	false

組件用法

基礎用法。

在配置data與columns屬性後便可正常展現數據

<template>
        <div>
            <el-grid width="500" :config="tableCfg" :data="data"></el-grid>
        </div>      
    </template>

    <script> export default { data(){ return{ data: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' } ], tableCfg:{ columns:[ { prop: 'name', label: '姓名', render:(row)=>{ return <el-button>{row.name}</el-button> } }, { prop: 'date', label: '日期' }, { prop: 'address', label: '地址' } ] } } } } </script>
複製代碼

加載服務端數據

須要配置url與mode屬性，url表示拉取數據的url地址。

<template>
    <div>
        <el-grid width="500" :config="tableCfg" ></el-grid>
    </div>      
</template>

<script> export default { data(){ return{ tableCfg:{ pageSize: 5, mode: 'local', url:'https://easy-mock.com/mock/5cb2c5708185550e7d51c038/example/getList', columns:[ { prop: 'name', label: '姓名' }, { prop: 'date', label: '日期' }, { prop: 'address', label: '地址' } ] } } } } </script>
複製代碼