74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<!--
|
|
* @Author: 田鑫
|
|
* @Date: 2023-02-16 14:40:38
|
|
* @LastEditors: 田鑫
|
|
* @LastEditTime: 2023-02-16 16:37:52
|
|
* @Description: table公用封装
|
|
-->
|
|
|
|
<template>
|
|
<div>
|
|
<a-table
|
|
:loading="loading"
|
|
:size="size"
|
|
:data="tableData"
|
|
:bordered="{ cell: borderCell }"
|
|
:pagination="setPagination"
|
|
page-position="br"
|
|
v-bind="propsRes"
|
|
v-on="propsEvent"
|
|
>
|
|
<template #columns>
|
|
<slot></slot>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PaginationProps, TableData } from '@arco-design/web-vue';
|
|
import type { PropType } from 'vue-demi';
|
|
import Components from 'unplugin-vue-components/vite';
|
|
|
|
type Size = 'mini' | 'small' | 'medium' | 'large';
|
|
|
|
const props = defineProps({
|
|
size: {
|
|
type: String as PropType<Size>,
|
|
default: 'large',
|
|
},
|
|
tableData: {
|
|
type: Array as PropType<TableData[]>,
|
|
default: () => [],
|
|
},
|
|
borderCell: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
pagination: {
|
|
type: Object as PropType<PaginationProps>,
|
|
default: () => {},
|
|
},
|
|
});
|
|
const loading = ref(false);
|
|
|
|
const setPagination = computed(() => {
|
|
const defaultPagination: PaginationProps = {
|
|
showPageSize: true,
|
|
showTotal: true,
|
|
showMore: true,
|
|
size: 'large',
|
|
};
|
|
return Object.assign(defaultPagination, props.pagination);
|
|
});
|
|
|
|
watchEffect(() => {
|
|
if (props.tableData.length === 0) {
|
|
loading.value = true;
|
|
} else {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped></style>
|