feat(components): enhance the custom strength of the 'TableHeaderOperation' component

This commit is contained in:
tnt group 2024-02-26 06:40:32 +08:00
parent 9c4ba6650d
commit fdf64f71f4

View File

@ -6,6 +6,7 @@ defineOptions({
});
interface Props {
itemAlign?: 'stretch' | 'baseline' | 'start' | 'end' | 'center' | 'flex-end' | 'flex-start';
disabledDelete?: boolean;
loading?: boolean;
}
@ -38,24 +39,27 @@ function refresh() {
</script>
<template>
<NSpace wrap justify="end" class="<sm:w-200px">
<NButton size="small" ghost type="primary" @click="add">
<template #icon>
<icon-ic-round-plus class="text-icon" />
</template>
{{ $t('common.add') }}
</NButton>
<NPopconfirm @positive-click="batchDelete">
<template #trigger>
<NButton size="small" ghost type="error" :disabled="disabledDelete">
<template #icon>
<icon-ic-round-delete class="text-icon" />
</template>
{{ $t('common.batchDelete') }}
</NButton>
</template>
{{ $t('common.confirmDelete') }}
</NPopconfirm>
<NSpace :align="itemAlign" wrap justify="end" class="<sm:w-200px">
<slot name="prefix"></slot>
<slot name="default">
<NButton size="small" ghost type="primary" @click="add">
<template #icon>
<icon-ic-round-plus class="text-icon" />
</template>
{{ $t('common.add') }}
</NButton>
<NPopconfirm @positive-click="batchDelete">
<template #trigger>
<NButton size="small" ghost type="error" :disabled="disabledDelete">
<template #icon>
<icon-ic-round-delete class="text-icon" />
</template>
{{ $t('common.batchDelete') }}
</NButton>
</template>
{{ $t('common.confirmDelete') }}
</NPopconfirm>
</slot>
<NButton size="small" @click="refresh">
<template #icon>
<icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
@ -63,6 +67,7 @@ function refresh() {
{{ $t('common.refresh') }}
</NButton>
<TableColumnSetting v-model:columns="columns" />
<slot name="suffix"></slot>
</NSpace>
</template>