基于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>
复制代码

转载于:https://juejin.im/post/5cb59af7e51d456e6d13347f