antd-vue table组件二次封装（ts版本）

前言：现在公司开发大佬们都在用ant框架了，既然换框架，当然得重新二次封装组件，table又是最最常用的组件，所以打算记录一下目前在项目中用到的封装完成的table组件。非常方便，就算换项目，复制过去继续用就完事了。

先放使用方法

<tableComponentref="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 = ProductActions.list;
// 查询参数
dataPost: GetProductListInputDto = {keyWordType: 0,keyWord: "",productName: "",productType: "",contractTimeStart: "",contractTimeEnd: "",warrantyTimeStart: "",warrantyTimeEnd: "",createTimeStart: "",createTimeEnd: ""};
// 分页请求参数 这里可以做一些请求参数的自定义
setParams() {const data = { ...this.dataPost };data.contractTimeStart = this.contractTimeStart[0];data.contractTimeEnd = this.contractTimeStart[1];data.warrantyTimeStart = this.warrantyTimeStart[0];data.warrantyTimeEnd = this.warrantyTimeStart[1];data.createTimeStart = this.createTimeStart[0];data.createTimeEnd = this.createTimeStart[1];return data;
}

成品图

组件内部实现

@Prop({ type: Boolean, default: true }) readonly isPage!: boolean; // 是否分页
@Prop({ type: Function }) readonly apiFun: Function | undefined; //api  (若果传了apiFun，默认请求)
@Prop({ type: Function }) readonly setParams: Function | undefined; //接口参数
@Prop({ type: Function }) readonly pageChange: Function | undefined; // 页码改变的回调函数// api获取数据getData() {if (this.apiFun) {this.loading = true;const pagination = {skipCount: (this.currentPage - 1) * this.pageSize,maxResultCount: this.pageSize// sorting: "CreationTime Desc"};let query = this.setParams ? this.setParams(pagination) : {};if (this.isPage) {if (query["skipCount"] === undefined) {query = {...pagination,...query};}}this.apiFun(query).then((res: any) => {this.loading = false;if (this.isPage) {this.tableData = res.data.items;this.total = res.data.totalCount;} else {this.tableData = res.data;}this.$emit("pageClick", this.tableData);}).catch(() => {this.loading = false;});}}//刷新数据(使用ref外部调用)refresh(val: boolean) {if (this.apiFun) {if (val) {this.currentPage = 1;this.getData();} else {this.getData();}}}

记录一下，方便以后继续使用

antd-vue table组件二次封装（ts版本）相关推荐

react 封装表格组件_GitHub - lzq741167479/react-antdTable-secondEncapsulation: antd Design 表格组件二次封装...
react 表格组件使用说明基础使用 import ITable from '@/components/Table/index'; { "result":true, " ...
基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...
Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
antD的table组件，长度过长使用省略号表示
目录解决的问题一.antD是什么? 二.使用步骤 1.使用render里面的参数(text)进行长度判断 2.结果总结解决的问题 table组件中,如果一个内容长度大于5,则用省略号显示多余的 ...
antd中table组件中如何进行换行操作（react中）
antd中table组件中如何进行换行操作(react中) 说明效果数据代码说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
Vue——axios的二次封装
文章目录一.请求和传递参数 1.get 请求 2.post 请求 3.axios 请求配置二.axios 的二次封装 1.配置拦截器 2.发送请求三.API 的解耦 1.配置文件对应的请求 2. ...
html表格怎么插入照片,antd的Table组件如何插入图片
在项目中有一个需求是在Table组件中插入图片,但是Table有自己封装的语法,查了查资料才整出来,完整代码如下: import React, { Component } from 'react'; ...
【vue】Storage二次封装
文章目录一.storage二次封装代码二.理解 1.setItem 2.getItem 3.clearItem 三.使用一.storage二次封装代码 /*** Storage 二次封装*/ i ...

antd-vue table组件二次封装（ts版本）

antd-vue table组件二次封装（ts版本）相关推荐

最新文章

热门文章