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

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

> 组件链接： [github.com/ZYuMing/el-…][github.com_ZYuMing_el-]

## 解决问题 ##

在支持el-table组件已有功能的基础上集成了排序，筛选，分页，请求服务端数据等功能，具有更好的拓展性。(支持JSX)

## 组件参数 ##

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>mode</td> 
   <td>加载数据的方式</td> 
   <td>String</td> 
   <td>local/remote</td> 
   <td>local</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>服务端数据接口url</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>columns</td> 
   <td>表格每列数据的显示配置</td> 
   <td>Srray</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>showPagingTool</td> 
   <td>是否显示分页组件</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>每页显示条数</td> 
   <td>Number</td> 
   <td>—</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>showSelection</td> 
   <td>是否显示表格选择框</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

## 组件用法 ##

### 基础用法。 ###

> 在配置`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

[github.com_ZYuMing_el-]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FZYuMing%2Fel-grid