vue3+antdv 表格封装

2023-11-07 12:28
文章标签 javascript 封装 vue vue3 表格 frontend antdv

本文主要是介绍vue3+antdv 表格封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

tool.ts


/**生成唯一ID */
let _idCounter = 0;
export function generateUniqueID() {var ts = new Date().getTime().toString();var parts = ts.split("").reverse();var id = "";for (var i = 0; i < 5; ++i) {var index = Math.floor(Math.random() * parts.length);id += parts[index];}id += (++_idCounter);return id;
}

<template><div class="table-box" :id="props.id"><Table class="table-content" bordered :rowKey="(record) => record[props.rowKey]" :row-selection="rowSelection":pagination="false" :scroll="{ y: props.scrollY || state.scrollY }" :columns="props.columns":loading="state.loading" :data-source="state.tableData" :size="props.size" v-bind="$attrs"><template v-slot:headerCell="{ column }"><p class="table-title" :class="tableTitleClass(props.columns)">{{ column.title }}</p></template><template v-if="props.isCustomEmpty" v-slot:emptyText><slot name="emptyText"></slot></template><template v-slot:bodyCell="{ column, record, index }"><template v-for="slotName of props.slots"><slot v-if="slotName === column?.dataIndex && column?.dataIndex !== 'index'" :name="slotName":column="column" :record="record" :index="index"></slot></template><span v-if="column && column?.dataIndex === 'index'">{{ getRowIndex(index) }}</span><spanv-if="column && column?.dataIndex !== 'index' && !props?.slots?.includes(column.dataIndex as string)">{{parseDefaultValue(record, column.dataIndex as string)}}</span></template></Table><a-pagination v-if="props.isPagination" v-model:current="state.pagination.current"v-model:page-size="state.pagination.pageSize" :total="state.pagination.total":showQuickJumper="state.pagination.showQuickJumper" :showSizeChanger="state.pagination.showSizeChanger"@change="state.pagination.onChange" :show-total="state.pagination.showTotal":position="state.pagination.position" :size="props.size" /></div>
</template>
<script lang="ts" setup>
import { Table, TablePaginationConfig } from "ant-design-vue";
import { SizeType } from "ant-design-vue/lib/config-provider";
import { reactive, computed, watch, nextTick, onUnmounted } from "vue"
import request from "@/lib/request";
import { AxiosRequestConfig } from "axios"
import _ from 'lodash'
import { generateUniqueID } from "@/lib/tool";
const props = withDefaults(defineProps<{columns: any[];pagination?: false | TablePaginationConfig;dataSource?: any[];slots?: string[];scrollY?: number | 'auto';rowKey?: string;url?: string;baseURL?: string;reqMethods?: string;reqHeaders?: object;query?: object;parseTableData?: Function;isPagination?: boolean;defaultLoad?: boolean;pageParams?: any;pageNo?: string | number;pageSize?: string | number;isSelected?: boolean;size?: SizeType;updateLoading?: Function;isCustomEmpty?: boolean;isClearSelectKeys?: boolean;currentKeys?: string[];currentKeysTable?: any[]id?: string
}>(), {defaultLoad: true,pagination: false,isPagination: true,isSelected: true,size: 'small',isCustomEmpty: false,reqMethods: "POST",parseTableData: ({ data, code }: any) => {if (code == 200) {return { data: data.data, total: data.totalCount };}return {};},rowKey: 'id',id:'BaseTable'+generateUniqueID(),isClearSelectKeys: true
});const {baseURL = window.APP_CONFIG.baseUrl,reqHeaders = {},pageParams = {pageNo: 1,pageSize: 10,},
} = props
interface TypeState {loading: boolean;tableData?: any[];pagination: TablePaginationConfig;selectedVlanIds: number[] | string[];scrollY: number | 'auto';tableHeight: string;selectedRows: any[];
}
const state: TypeState = reactive({loading: false,tableData: props.dataSource,pagination: {current: pageParams.pageNo,pageSize: pageParams.pageSize,total: 0,showSizeChanger: true,showQuickJumper: true,position: ["bottomCenter"],showTotal: (total) => `共 ${total} 条`, // 展示总共有几条数据onChange: pageChange},selectedVlanIds: [] as string[] | number[],selectedRows: [] as any[],scrollY: 0,tableHeight: `calc(100% - 56px)`
})
function pageChange(page: number, pageSize: number) {currentChange(page)pageSize != state.pagination.pageSize && sizeChange(pageSize)
}const $emit = defineEmits(['currentChange', 'sizeChange', 'onData', 'selectChange', 'tableChange']); // 父组件的触发事件
async function getData() {if (!props.url) return;let params: AxiosRequestConfig = {baseURL: baseURL,url: props.url,method: props.reqMethods,headers: reqHeaders,};const page = {pageNo: state.pagination.current,pageSize: state.pagination.pageSize,}if (props.reqMethods === "GET") {params = {...params,params: props.isPagination ? { ...props.query, ...page } : props.query,};} else {params = {...params,data: props.isPagination ? { ...props.query, ...page } : props.query,};}try {if (props?.updateLoading) {props.updateLoading(true)} else {state.loading = true;}let dataS = await request(params);if (dataS) {let { data, total } = props.parseTableData(dataS);if (props?.isClearSelectKeys) {onSelectChange([], [])}if (props?.currentKeys?.length) {onSelectChange(props?.currentKeys, props?.currentKeysTable)}state.tableData = data;state.pagination.total = total;$emit("onData", data);}} catch (error) {console.log(error);} finally {if (props?.updateLoading) {props.updateLoading(false)} else {state.loading = false;}}
}
function refresh() {if (props.isPagination) {currentChange(1);} else {getData();}
}
function currentChange(val: number) {state.pagination.current = val;getData();
}
function sizeChange(val: number) {state.pagination.pageSize = val;$emit("sizeChange", val);currentChange(1);
}
const onSelectChange = (changeAbleRowKeys: any[], selectedRows: any) => {state.selectedVlanIds = changeAbleRowKeys;state.selectedRows = selectedRows;$emit('selectChange', changeAbleRowKeys, selectedRows)
};
const onSelect = (record: any, selected: any, _selectedRows: any) => {let arr = state.selectedVlanIds as any[];if (selected) {// onSelectChange(selectedRows?.map((e: any) => e[props.rowKey]), selectedRows)arr.push(record[props.rowKey] as string)state.selectedRows.push(record)onSelectChange(state.selectedVlanIds, state.selectedRows)} else {const arrI = arr.findIndex((e) => e === record[props.rowKey])const rowI = state.selectedRows.findIndex((e) => e[props.rowKey] === record[props.rowKey])state.selectedRows.splice(rowI, 1)arr.splice(arrI, 1)onSelectChange(arr, state.selectedRows)}
}const onSelectAll = (selected: any, _selectedRows: any, _changeRows: any) => {if (selected) {if (state.tableData) {onSelectChange(state.tableData?.map((e: any) => e[props.rowKey]), state.tableData)}} else {onSelectChange([], [])}
}const rowSelection = computed(() => {let result: {} | undefined = undefinedif (props.isSelected) {result = {selectedRowKeys: state.selectedVlanIds,// onChange: onSelectChange,onSelectAll: onSelectAll,hideDefaultSelections: true,onSelect: onSelect,}}return result;
});
props.defaultLoad && refresh()
const parseDefaultValue = (record: Record<string, any>, dataIndex: string) => {const dataIndexs = dataIndex.split(".");let result = record;dataIndexs.forEach((element) => {if (result) {result = result[element];}});if (result == null) {return "--";}return result;
};
function getRowIndex(index: number) {const pageParams = {pageNo: state?.pagination?.current || 0,pageSize: state?.pagination?.pageSize,}if (pageParams && pageParams.pageSize) {return (pageParams.pageSize * (pageParams?.pageNo - 1) +index +1);}return index + 1;
}
function tableTitleClass(column: any) {return `${column?.isRequired ? 'is-required' : ''}`
}
function getTableData() {return state.tableData
}
function getSelectKeys() {return state.selectedVlanIds
}
const doLayout = _.debounce(function () {nextTick(() => {const tableMain = (document.querySelector(`#${props.id} .table-content`) as HTMLDivElement)?.offsetHeightconst headerH = (document.querySelector(`#${props.id} .ant-table-header`) as HTMLDivElement)?.offsetHeightstate.scrollY = tableMain - headerH})
}, 200)
doLayout()
window.addEventListener("resize", doLayout);
onUnmounted(() => {window.removeEventListener('resize', doLayout)
})
watch(() => props.isPagination,(val) => {nextTick(() => {const paginationH = (document.querySelector(`#${props.id} .ant-pagination`) as HTMLDivElement)?.offsetHeightstate.tableHeight = val ? `calc(100% - ${paginationH}px)` : `100%`})},{ immediate: true }
);
watch(() => props.dataSource,(val) => {state.tableData = val},{ immediate: true, deep: true }
);
watch(() => state.tableData,(val) => {$emit('tableChange', val)doLayout()},{ immediate: true }
);
defineExpose({refresh,getTableData,doLayout,onSelectChange,getSelectKeys
})
</script><style scoped lang="scss">
$bg-color: #fff;.table-box {height: 100%;background-color: $bg-color;.table-content {height: v-bind("state.tableHeight");overflow: auto;}:deep(.ant-pagination) {padding: 12px;display: flex;justify-content: center;background-color: $bg-color;}
}.is-required {&:before {content: '*';color: red}
}.table-title {white-space: break-spaces;
}
</style>

这篇关于vue3+antdv 表格封装的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/363583。

相关文章

Golang如何对cron进行二次封装实现指定时间执行定时任务

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》：本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
Python中对FFmpeg封装开发库FFmpy详解

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》：本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2