GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
tnt group 2024-02-26 06:40:32 +08:00
parent 9c4ba6650d
commit fdf64f71f4
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/advanced/table-header-operation.vue
View File

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