基于elementUI库中table组件二次封装-蒲公英云

基于elementUI库中table组件二次封装

迷南。 2022-10-01 07:53 359阅读 0赞

组件链接： 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>
复制代码