mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
feat(components): 新增表格属性配置
This commit is contained in:
@ -6,6 +6,7 @@ import LayoutMode from './modules/layout-mode.vue';
|
||||
import ThemeColor from './modules/theme-color.vue';
|
||||
import PageFun from './modules/page-fun.vue';
|
||||
import ConfigOperation from './modules/config-operation.vue';
|
||||
import TableProps from './modules/table-props.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'ThemeDrawer'
|
||||
@ -21,6 +22,7 @@ const appStore = useAppStore();
|
||||
<LayoutMode />
|
||||
<ThemeColor />
|
||||
<PageFun />
|
||||
<TableProps />
|
||||
<template #footer>
|
||||
<ConfigOperation />
|
||||
</template>
|
||||
|
44
src/layouts/modules/theme-drawer/modules/table-props.vue
Normal file
44
src/layouts/modules/theme-drawer/modules/table-props.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { themeTableSizeOptions } from '@/constants/app';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { translateOptions } from '@/utils/common';
|
||||
import { $t } from '@/locales';
|
||||
import SettingItem from '../components/setting-item.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'TableProps'
|
||||
});
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDivider>{{ $t('theme.tablePropsTitle') }}</NDivider>
|
||||
<TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
|
||||
<SettingItem key="0" :label="$t('theme.table.size.title')">
|
||||
<NSelect
|
||||
v-model:value="themeStore.table.size"
|
||||
:options="translateOptions(themeTableSizeOptions)"
|
||||
size="small"
|
||||
class="w-120px"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem key="1" :label="$t('theme.table.bordered')">
|
||||
<NSwitch v-model:value="themeStore.table.bordered" />
|
||||
</SettingItem>
|
||||
<SettingItem key="2" :label="$t('theme.table.bottomBordered')">
|
||||
<NSwitch v-model:value="themeStore.table.bottomBordered" />
|
||||
</SettingItem>
|
||||
<SettingItem key="3" :label="$t('theme.table.singleColumn')">
|
||||
<NSwitch v-model:value="themeStore.table.singleColumn" :checked-value="false" :unchecked-value="true" />
|
||||
</SettingItem>
|
||||
<SettingItem key="4" :label="$t('theme.table.singleLine')">
|
||||
<NSwitch v-model:value="themeStore.table.singleLine" :checked-value="false" :unchecked-value="true" />
|
||||
</SettingItem>
|
||||
<SettingItem key="5" :label="$t('theme.table.striped')">
|
||||
<NSwitch v-model:value="themeStore.table.striped" />
|
||||
</SettingItem>
|
||||
</TransitionGroup>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
Reference in New Issue
Block a user