46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import type { DataTableColumns, PaginationProps } from 'naive-ui';
|
|
|
|
const props = defineProps<{
|
|
fetchData: (pagination: PaginationProps) => Promise<{ data: any[]; itemCount: number }>;
|
|
columns: DataTableColumns;
|
|
pagination: PaginationProps;
|
|
}>();
|
|
|
|
const data = ref<any[]>([]);
|
|
const headerColumns = computed(() => {
|
|
return props.columns
|
|
.filter(col => {
|
|
return !col.fixed;
|
|
})
|
|
.map(col => {
|
|
return {
|
|
key: col.key,
|
|
title: col.title,
|
|
checked: true,
|
|
visible: true
|
|
};
|
|
});
|
|
});
|
|
|
|
async function loadData() {
|
|
const result = await props.fetchData(props.pagination);
|
|
data.value = result.data;
|
|
props.pagination!.itemCount = result.itemCount;
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-5">
|
|
<TableHeaderOperation :columns="headerColumns" />
|
|
<NDataTable :columns="columns" :data="data!" :pagination="pagination" :bordered="false" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped></style>
|