diff --git a/src/components/SmartTable/src/components/SmartTableSizeSetting.tsx b/src/components/SmartTable/src/components/SmartTableSizeSetting.tsx index 8eaaf7c0e..c1abd2e36 100644 --- a/src/components/SmartTable/src/components/SmartTableSizeSetting.tsx +++ b/src/components/SmartTable/src/components/SmartTableSizeSetting.tsx @@ -1,7 +1,7 @@ import type { SmartTableToolbarSizeSetting } from '@/components/SmartTable'; import type { SizeType, VxeButtonProps } from 'vxe-table'; -import { defineComponent, h, onMounted } from 'vue'; +import { computed, defineComponent, h, onMounted, unref } from 'vue'; import { Menu, Dropdown } from 'ant-design-vue'; import { ColumnHeightOutlined } from '@ant-design/icons-vue'; @@ -25,6 +25,9 @@ export default defineComponent({ }, setup() { const tableContext = useTableContext(); + const computedSize = computed(() => { + return [unref(tableContext.getBindValues).size]; + }); const handleChangeSize = (e) => { tableContext.setProps({ size: e.key, @@ -58,22 +61,27 @@ export default defineComponent({ }); return { handleChangeSize, + computedSize, }; }, render() { - const { config, handleChangeSize } = this; + const { config, handleChangeSize, computedSize } = this; const slots = { default: renderButton(config), - overlay: renderOverlay(config, handleChangeSize), + overlay: renderOverlay(config, handleChangeSize, computedSize), }; return {slots}; }, }); -const renderOverlay = (config: SmartTableToolbarSizeSetting, handleChangeSize: Function) => { +const renderOverlay = ( + config: SmartTableToolbarSizeSetting, + handleChangeSize: Function, + computedSize, +) => { return () => { return ( - handleChangeSize(e)}> + handleChangeSize(e)} selectedKeys={computedSize}> 大 中等 紧凑