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。

相关文章

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件：四、dhtmlx
阅读更多...
Vue ElementUI中Upload组件批量上传的实现代码

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl
阅读更多...
前端知识点之Javascript选择输入框confirm用法

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》：本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为：confirm 对话框会阻塞脚本的执行，直到用户作出选择。②
阅读更多...
如何使用CSS3实现波浪式图片墙

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》：本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙，通过设置图片的垂直偏移量，并使用动画使其周期性地改变位置，可以创建出动态且具有波浪效果的图片墙，同时，还强调了响应式设计的重要性，以确保图片墙在不同设备上都能良好显示，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
禁止HTML页面滚动的操作方法

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》：本文主要介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性，每种方法都有其适用场景和优缺点，详细内容请阅读本文，希望能对你有所帮助... 在前端开发中，禁止htm
阅读更多...
Vue3中的动态组件详解

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态
阅读更多...
spring-boot-starter-thymeleaf加载外部html文件方式

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2