feat: 新增 vxe table 工具栏二次封装,提供给 vxe 原生列表使用
This commit is contained in:
1
apps/web-antd/src/components/table-toolbar/index.ts
Normal file
1
apps/web-antd/src/components/table-toolbar/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as TableToolbar } from './table-toolbar.vue';
|
||||
54
apps/web-antd/src/components/table-toolbar/table-toolbar.vue
Normal file
54
apps/web-antd/src/components/table-toolbar/table-toolbar.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeToolbarInstance } from 'vxe-table';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useContentMaximize, useRefresh } from '@vben/hooks';
|
||||
import { Fullscreen, RefreshCw, Search } from '@vben/icons';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { VxeToolbar } from 'vxe-table';
|
||||
|
||||
/** 列表工具栏封装 */
|
||||
defineOptions({ name: 'TableToolbar' });
|
||||
|
||||
const props = defineProps<{
|
||||
hiddenSearch: boolean;
|
||||
}>();
|
||||
|
||||
const emits = defineEmits(['update:hiddenSearch']);
|
||||
|
||||
const toolbarRef = ref<VxeToolbarInstance>();
|
||||
const { toggleMaximizeAndTabbarHidden } = useContentMaximize();
|
||||
const { refresh } = useRefresh();
|
||||
|
||||
/** 隐藏搜索栏 */
|
||||
function onHiddenSearchBar() {
|
||||
emits('update:hiddenSearch', !props.hiddenSearch);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getToolbarRef: () => toolbarRef.value,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VxeToolbar ref="toolbarRef" custom>
|
||||
<template #toolPrefix>
|
||||
<slot></slot>
|
||||
<Button class="ml-2 font-[8px]" shape="circle" @click="onHiddenSearchBar">
|
||||
<Search :size="15" />
|
||||
</Button>
|
||||
<Button class="ml-2 font-[8px]" shape="circle" @click="refresh">
|
||||
<RefreshCw :size="15" />
|
||||
</Button>
|
||||
<Button
|
||||
class="ml-2 font-[8px]"
|
||||
shape="circle"
|
||||
@click="toggleMaximizeAndTabbarHidden"
|
||||
>
|
||||
<Fullscreen :size="15" />
|
||||
</Button>
|
||||
</template>
|
||||
</VxeToolbar>
|
||||
</template>
|
||||
Reference in New Issue
Block a user