前言:现在公司开发大佬们都在用ant框架了,既然换框架,当然得重新二次封装组件,table又是最最常用的组件,所以打算记录一下目前在项目中用到的封装完成的table组件。非常方便,就算换项目,复制过去继续用就完事了。
先放使用方法
<tableComponent
ref="table"
:columns="columns" // 表头
:is-page="true" // 是否需要分页器
:height="600" // 表格高度
:apiFun="getList" // 直接请求api展示 直接传一个分页查询接口名,内部会自动解析数据,将columns中的dataIndex和字段名对应,表格就完事了。
:setParams="setParams" // 分页参数
:is-select="true" // 是否需要多选
@row-change="tableSelect($event)" // 多选回调
:selectedRowKeys="tableSele" // 多选下标集合
@pageClick="pageClick"
>
// 插槽
<div slot="ope" slot-scope="{ record }">
<a-button type="link" @click="view(record)">查看</a-button>
<a-button type="link" @click="delItem(record)">删除</a-button>
</div>
</tableComponent>
页面使用
// 项目中的分页查询接口名,传给table
getList