Browse Source

perf(组件:smart-table): smart-table组件尺寸配置按钮支持显示当前尺寸

shizhongming 3 years ago
parent
commit
861cbcc48c
  1. 18
      src/components/SmartTable/src/components/SmartTableSizeSetting.tsx

18
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 <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>

Loading…
Cancel
Save