antd-vue table组件二次封装(ts版本)

前言:现在公司开发大佬们都在用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 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值