<template>
|
<Tooltip placement="top">
|
<template #title>
|
<span>{{ t('component.table.settingDens') }}</span>
|
</template>
|
|
<Dropdown placement="bottom" :trigger="['click']" :getPopupContainer="getPopupContainer">
|
<ColumnHeightOutlined />
|
<template #overlay>
|
<Menu @click="handleTitleClick" selectable v-model:selectedKeys="selectedKeysRef">
|
<Menu.Item key="default">
|
<span>{{ t('component.table.settingDensDefault') }}</span>
|
</Menu.Item>
|
<Menu.Item key="middle">
|
<span>{{ t('component.table.settingDensMiddle') }}</span>
|
</Menu.Item>
|
<Menu.Item key="small">
|
<span>{{ t('component.table.settingDensSmall') }}</span>
|
</Menu.Item>
|
</Menu>
|
</template>
|
</Dropdown>
|
</Tooltip>
|
</template>
|
<script lang="ts" setup>
|
import type { SizeType } from '../../types/table';
|
import { ref, onMounted } from 'vue';
|
import { Tooltip, Dropdown, Menu, type MenuProps } from 'ant-design-vue';
|
import { ColumnHeightOutlined } from '@ant-design/icons-vue';
|
import { useI18n } from '@/hooks/web/useI18n';
|
import { useTableContext } from '../../hooks/useTableContext';
|
import { getPopupContainer } from '@/utils';
|
|
import { useTableSettingStore } from '@/store/modules/tableSetting';
|
|
const tableSettingStore = useTableSettingStore();
|
|
defineOptions({ name: 'SizeSetting' });
|
|
const table = useTableContext();
|
const { t } = useI18n();
|
|
const selectedKeysRef = ref<SizeType[]>([table.getSize()]);
|
|
const handleTitleClick: MenuProps['onClick'] = ({ key }) => {
|
selectedKeysRef.value = [key as SizeType];
|
|
tableSettingStore.setTableSize(key as SizeType);
|
|
table.setProps({
|
size: key as SizeType,
|
});
|
};
|
|
onMounted(() => {
|
selectedKeysRef.value = [tableSettingStore.getTableSize];
|
table.setProps({
|
size: selectedKeysRef.value[0],
|
});
|
});
|
</script>
|
