ソースを参照

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

shizhongming 2 年 前
コミット
861cbcc48c

+ 13 - 5
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>