|
|
@@ -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 <Dropdown>{slots}</Dropdown>;
|
|
|
},
|
|
|
});
|
|
|
|
|
|
-const renderOverlay = (config: SmartTableToolbarSizeSetting, handleChangeSize: Function) => {
|
|
|
+const renderOverlay = (
|
|
|
+ config: SmartTableToolbarSizeSetting,
|
|
|
+ handleChangeSize: Function,
|
|
|
+ computedSize,
|
|
|
+) => {
|
|
|
return () => {
|
|
|
return (
|
|
|
- <Menu onClick={(e) => handleChangeSize(e)}>
|
|
|
+ <Menu onClick={(e) => handleChangeSize(e)} selectedKeys={computedSize}>
|
|
|
<Menu.Item key="middle">大</Menu.Item>
|
|
|
<Menu.Item key="small">中等</Menu.Item>
|
|
|
<Menu.Item key="mini">紧凑</Menu.Item>
|