<template>
|
<div style="width: 100%">
|
<div v-if="$slots.headerTop" style="margin: 5px">
|
<slot name="headerTop"></slot>
|
</div>
|
<div v-if="showSelectionBar" style="margin: 5px">
|
<TableSelectionBar :clearSelectedRowKeys="props.clearSelectedRowKeys!" :count="props.count" />
|
</div>
|
<div class="flex items-center">
|
<slot name="tableTitle" v-if="$slots.tableTitle"></slot>
|
<TableTitle
|
:helpMessage="titleHelpMessage"
|
:title="title"
|
v-if="!$slots.tableTitle && title"
|
/>
|
<div :class="`${prefixCls}__toolbar`">
|
<slot name="toolbar"></slot>
|
<Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
|
<TableSettingComponent
|
:setting="tableSetting"
|
v-if="showTableSetting"
|
@columns-change="handleColumnChange"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import type { TableSetting, ColumnChangeParam, TableActionType } from '../types/table';
|
import type { PropType } from 'vue';
|
import { Divider } from 'ant-design-vue';
|
import TableSettingComponent from './settings/index.vue';
|
import TableTitle from './TableTitle.vue';
|
import { useDesign } from '@/hooks/web/useDesign';
|
import TableSelectionBar from '../components/TableSelectionBar.vue';
|
|
defineOptions({ name: 'BasicTableHeader' });
|
|
const props = defineProps({
|
title: {
|
type: [Function, String] as PropType<string | ((data) => string)>,
|
},
|
tableSetting: {
|
type: Object as PropType<TableSetting>,
|
},
|
showTableSetting: {
|
type: Boolean,
|
},
|
titleHelpMessage: {
|
type: [String, Array] as PropType<string | string[]>,
|
default: '',
|
},
|
//
|
clearSelectedRowKeys: {
|
type: Function as PropType<TableActionType['clearSelectedRowKeys']>,
|
},
|
count: {
|
type: Number,
|
default: 0,
|
},
|
showSelectionBar: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
const emit = defineEmits(['columns-change']);
|
const { prefixCls } = useDesign('basic-table-header');
|
function handleColumnChange(data: ColumnChangeParam[]) {
|
emit('columns-change', data);
|
}
|
</script>
|
<style lang="less">
|
@prefix-cls: ~'@{namespace}-basic-table-header';
|
|
.@{prefix-cls} {
|
&__toolbar {
|
display: flex;
|
flex: 1;
|
align-items: center;
|
justify-content: flex-end;
|
|
> * {
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
