diff --git a/.vscode/settings.json b/.vscode/settings.json
index 096d7ad9..bbcf8694 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -25,8 +25,8 @@
   //============= files =======================
   //===========================================
   "files.trimTrailingWhitespace": true,
-  "files.insertFinalNewline": true,
-  "files.trimFinalNewlines": true,
+  // "files.insertFinalNewline": true,
+  // "files.trimFinalNewlines": true,
   "files.eol": "\n",
   "search.exclude": {
     "**/node_modules": true,
@@ -76,14 +76,14 @@
   // ===========================================
   // ================ Vetur ====================
   // ===========================================
-  "vetur.experimental.templateInterpolationService": true,
-  "vetur.format.options.tabSize": 2,
-  "vetur.languageFeatures.codeActions": false,
-  "vetur.format.defaultFormatterOptions": {
-    "js-beautify-html": {
-      "wrap_attributes": "force-expand-multiline"
-    }
-  },
+  // "vetur.experimental.templateInterpolationService": true,
+  // "vetur.format.options.tabSize": 2,
+  // "vetur.languageFeatures.codeActions": false,
+  // "vetur.format.defaultFormatterOptions": {
+  //   "js-beautify-html": {
+  //     "wrap_attributes": "force-expand-multiline"
+  //   }
+  // },
   "liveServer.settings.donotShowInfoMsg": true,
   "telemetry.enableCrashReporter": false,
   "workbench.settings.enableNaturalLanguageSearch": false,
diff --git a/build/vite/plugin/compress.ts b/build/vite/plugin/compress.ts
index 45583be2..9563679c 100644
--- a/build/vite/plugin/compress.ts
+++ b/build/vite/plugin/compress.ts
@@ -8,7 +8,7 @@ import compressPlugin from 'vite-plugin-compression';
 
 export function configCompressPlugin(
   compress: 'gzip' | 'brotli' | 'none',
-  deleteOriginFile: boolean = false
+  deleteOriginFile = false
 ): Plugin | Plugin[] {
   const compressList = compress.split(',');
 
diff --git a/package.json b/package.json
index cab3846e..1fd90090 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,7 @@
     "concurrently": "^5.3.0",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@iconify/json": "^1.1.350",
+    "@iconify/json": "^1.1.353",
     "@purge-icons/generated": "^0.7.0",
     "@types/codemirror": "^5.60.0",
     "@types/crypto-js": "^4.0.1",
@@ -130,7 +130,7 @@
     "@types/inquirer": "^7.3.1",
     "@types/lodash-es": "^4.17.4",
     "@types/mockjs": "^1.0.3",
-    "@types/node": "^15.12.0",
+    "@types/node": "^15.12.1",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.0",
     "@types/qs": "^6.9.6",
@@ -146,12 +146,12 @@
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
     "dotenv": "^10.0.0",
-    "eslint": "^7.27.0",
+    "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-define-config": "^1.0.8",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.10.0",
-    "esno": "^0.6.0",
+    "esno": "^0.7.0",
     "fs-extra": "^10.0.0",
     "http-server": "^0.12.3",
     "husky": "^6.0.0",
@@ -160,7 +160,7 @@
     "less": "^4.1.1",
     "lint-staged": "^11.0.0",
     "postcss": "^8.3.0",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.1",
     "pretty-quick": "^3.1.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-visualizer": "5.5.0",
@@ -187,7 +187,7 @@
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "^2.50.6"
+    "rollup": "^2.51.0"
   },
   "repository": {
     "type": "git",
diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue
index 8d349e8d..d4fadbcb 100644
--- a/src/components/Button/src/BasicButton.vue
+++ b/src/components/Button/src/BasicButton.vue
@@ -1,47 +1,49 @@
 <template>
-  <Button v-bind="getBindValue" :class="[getColor, $attrs.class]" @click="onClick">
+  <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
     <template #default="data">
-      <Icon :icon="preIcon" v-if="preIcon" :size="14" />
+      <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
       <slot v-bind="data"></slot>
-      <Icon :icon="postIcon" v-if="postIcon" :size="14" />
+      <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
     </template>
   </Button>
 </template>
 <script lang="ts">
   import { defineComponent, computed } from 'vue';
-
   import { Button } from 'ant-design-vue';
-  import Icon from '/@/components/Icon';
+  import { Icon } from '/@/components/Icon';
 
-  import { propTypes } from '/@/utils/propTypes';
+  const props = {
+    color: { type: String, validate: (v) => ['error', 'warning', 'success', ''].includes(v) },
+    loading: { type: Boolean },
+    disabled: { type: Boolean },
+    preIcon: { type: String },
+    postIcon: { type: String },
+    iconSize: { type: Number, default: 14 },
+    onClick: { type: Function as PropType<(...args) => any>, default: null },
+  };
 
   export default defineComponent({
     name: 'AButton',
     components: { Button, Icon },
     inheritAttrs: false,
-    props: {
-      type: propTypes.oneOf(['primary', 'default', 'danger', 'dashed', 'link']).def('default'),
-      color: propTypes.oneOf(['error', 'warning', 'success', '']),
-      loading: propTypes.bool,
-      disabled: propTypes.bool,
-      preIcon: propTypes.string,
-      postIcon: propTypes.string,
-      onClick: propTypes.func,
-    },
+    props,
     setup(props, { attrs }) {
-      const getColor = computed(() => {
+      // get component class
+      const getButtonClass = computed(() => {
         const { color, disabled } = props;
-        return {
-          [`ant-btn-${color}`]: !!color,
-          [`is-disabled`]: disabled,
-        };
+        return [
+          {
+            [`ant-btn-${color}`]: !!color,
+            [`is-disabled`]: disabled,
+          },
+          attrs.class,
+        ];
       });
 
-      const getBindValue = computed((): any => {
-        return { ...attrs, ...props };
-      });
+      // get inherit binding value
+      const getBindValue = computed(() => ({ ...attrs, ...props }));
 
-      return { getBindValue, getColor };
+      return { getBindValue, getButtonClass };
     },
   });
 </script>
diff --git a/src/components/Button/src/PopConfirmButton.vue b/src/components/Button/src/PopConfirmButton.vue
index 7691cf60..4e546a05 100644
--- a/src/components/Button/src/PopConfirmButton.vue
+++ b/src/components/Button/src/PopConfirmButton.vue
@@ -1,31 +1,33 @@
 <script lang="ts">
   import { defineComponent, h, unref, computed } from 'vue';
-
   import { Popconfirm } from 'ant-design-vue';
-
   import BasicButton from './BasicButton.vue';
-
-  import { propTypes } from '/@/utils/propTypes';
   import { extendSlots } from '/@/utils/helper/tsxHelper';
   import { omit } from 'lodash-es';
-
   import { useAttrs } from '/@/hooks/core/useAttrs';
   import { useI18n } from '/@/hooks/web/useI18n';
 
+  const props = {
+    /**
+     * Whether to enable the drop-down menu
+     * @default: true
+     */
+    enable: {
+      type: Boolean,
+      default: true,
+    },
+  };
+
   export default defineComponent({
     name: 'PopButton',
     components: { Popconfirm, BasicButton },
     inheritAttrs: false,
-    props: {
-      size: propTypes.oneOf(['large', 'default', 'small']).def(),
-      enable: propTypes.bool.def(true),
-      okText: propTypes.string,
-      cancelText: propTypes.string,
-    },
+    props,
     setup(props, { slots }) {
       const { t } = useI18n();
       const attrs = useAttrs();
 
+      // get inherit binding value
       const getBindValues = computed(() => {
         const popValues = Object.assign(
           {
@@ -38,14 +40,14 @@
       });
 
       return () => {
-        const values = omit(unref(getBindValues), 'icon');
-        const Button = h(BasicButton, values, extendSlots(slots));
+        const bindValues = omit(unref(getBindValues), 'icon');
+        const Button = h(BasicButton, bindValues, extendSlots(slots));
 
+        // If it is not enabled, it is a normal button
         if (!props.enable) {
           return Button;
         }
-
-        return h(Popconfirm, values, { default: () => Button });
+        return h(Popconfirm, bindValues, { default: () => Button });
       };
     },
   });
diff --git a/src/components/Form/src/hooks/useAdvanced.ts b/src/components/Form/src/hooks/useAdvanced.ts
index 901be480..372ba707 100644
--- a/src/components/Form/src/hooks/useAdvanced.ts
+++ b/src/components/Form/src/hooks/useAdvanced.ts
@@ -7,6 +7,7 @@ import { computed, unref, watch } from 'vue';
 import { isBoolean, isFunction, isNumber, isObject } from '/@/utils/is';
 
 import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
+import { useDebounceFn } from '@vueuse/core';
 
 const BASIC_COL_LEN = 24;
 
@@ -49,12 +50,14 @@ export default function ({
     return 0;
   });
 
+  const debounceUpdateAdvanced = useDebounceFn(updateAdvanced, 30);
+
   watch(
     [() => unref(getSchema), () => advanceState.isAdvanced, () => unref(realWidthRef)],
     () => {
       const { showAdvancedButton } = unref(getProps);
       if (showAdvancedButton) {
-        updateAdvanced();
+        debounceUpdateAdvanced();
       }
     },
     { immediate: true }
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index bf6047e1..546af304 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -32,13 +32,19 @@
   </div>
 </template>
 <script lang="ts">
-  import type { BasicTableProps, TableActionType, SizeType } from './types/table';
+  import type {
+    BasicTableProps,
+    TableActionType,
+    SizeType,
+    ColumnChangeParam,
+  } from './types/table';
 
   import { defineComponent, ref, computed, unref, toRaw } from 'vue';
   import { Table } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import expandIcon from './components/ExpandIcon';
   import HeaderCell from './components/HeaderCell.vue';
+  import { InnerHandlers } from './types/table';
 
   import { usePagination } from './hooks/usePagination';
   import { useColumns } from './hooks/useColumns';
@@ -83,6 +89,7 @@
       'edit-change',
       'expanded-rows-change',
       'change',
+      'columns-change',
     ],
     setup(props, { attrs, emit, slots }) {
       const tableElRef = ref<ComponentRef>(null);
@@ -177,7 +184,15 @@
 
       const { getExpandOption, expandAll, collapseAll } = useTableExpand(getProps, tableData, emit);
 
-      const { getHeaderProps } = useTableHeader(getProps, slots);
+      const handlers: InnerHandlers = {
+        onColumnsChange: (data: ColumnChangeParam[]) => {
+          emit('columns-change', data);
+          // support useTable
+          unref(getProps).onColumnsChange?.(data);
+        },
+      };
+
+      const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
 
       const { getFooterProps } = useTableFooter(
         getProps,
diff --git a/src/components/Table/src/components/TableHeader.vue b/src/components/Table/src/components/TableHeader.vue
index 60eb1a8e..7f93b00d 100644
--- a/src/components/Table/src/components/TableHeader.vue
+++ b/src/components/Table/src/components/TableHeader.vue
@@ -6,11 +6,15 @@
   <div :class="`${prefixCls}__toolbar`">
     <slot name="toolbar"></slot>
     <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
-    <TableSetting :setting="tableSetting" v-if="showTableSetting" />
+    <TableSetting
+      :setting="tableSetting"
+      v-if="showTableSetting"
+      @columns-change="handleColumnChange"
+    />
   </div>
 </template>
 <script lang="ts">
-  import type { TableSetting } from '../types/table';
+  import type { TableSetting, ColumnChangeParam } from '../types/table';
   import type { PropType } from 'vue';
 
   import { defineComponent } from 'vue';
@@ -42,9 +46,13 @@
         default: '',
       },
     },
-    setup() {
+    emits: ['columns-change'],
+    setup(_, { emit }) {
       const { prefixCls } = useDesign('basic-table-header');
-      return { prefixCls };
+      function handleColumnChange(data: ColumnChangeParam[]) {
+        emit('columns-change', data);
+      }
+      return { prefixCls, handleColumnChange };
     },
   });
 </script>
diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
index 9c78c826..e77dae9b 100644
--- a/src/components/Table/src/components/settings/ColumnSetting.vue
+++ b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -114,7 +114,7 @@
   import { getPopupContainer } from '/@/utils';
   import { omit } from 'lodash-es';
 
-  import type { BasicColumn } from '../../types/table';
+  import type { BasicColumn, ColumnChangeParam } from '../../types/table';
 
   interface State {
     checkAll: boolean;
@@ -141,8 +141,9 @@
       Divider,
       Icon,
     },
+    emits: ['columns-change'],
 
-    setup() {
+    setup(_, { emit }) {
       const { t } = useI18n();
       const table = useTableContext();
 
@@ -234,10 +235,10 @@
         const checkList = plainOptions.value.map((item) => item.value);
         if (e.target.checked) {
           state.checkedList = checkList;
-          table.setColumns(checkList);
+          setColumns(checkList);
         } else {
           state.checkedList = [];
-          table.setColumns([]);
+          setColumns([]);
         }
       }
 
@@ -257,7 +258,7 @@
         checkedList.sort((prev, next) => {
           return sortList.indexOf(prev) - sortList.indexOf(next);
         });
-        table.setColumns(checkedList);
+        setColumns(checkedList);
       }
 
       // reset columns
@@ -266,7 +267,7 @@
         state.checkAll = true;
         plainOptions.value = unref(cachePlainOptions);
         plainSortOptions.value = unref(cachePlainOptions);
-        table.setColumns(table.getCacheColumns());
+        setColumns(table.getCacheColumns());
       }
 
       // Open the pop-up window for drag and drop initialization
@@ -298,7 +299,7 @@
 
               plainSortOptions.value = columns;
               plainOptions.value = columns;
-              table.setColumns(columns);
+              setColumns(columns);
             },
           });
           initSortable();
@@ -335,7 +336,21 @@
           item.width = 100;
         }
         table.setCacheColumnsByField?.(item.dataIndex, { fixed: isFixed });
+        setColumns(columns);
+      }
+
+      function setColumns(columns: BasicColumn[] | string[]) {
         table.setColumns(columns);
+        const data: ColumnChangeParam[] = unref(plainOptions).map((col) => {
+          const visible =
+            columns.findIndex(
+              (c: BasicColumn | string) =>
+                c === col.value || (typeof c !== 'string' && c.dataIndex === col.value)
+            ) !== -1;
+          return { dataIndex: col.value, fixed: col.fixed, visible };
+        });
+
+        emit('columns-change', data);
       }
 
       return {
diff --git a/src/components/Table/src/components/settings/index.vue b/src/components/Table/src/components/settings/index.vue
index ed079993..4c0b054d 100644
--- a/src/components/Table/src/components/settings/index.vue
+++ b/src/components/Table/src/components/settings/index.vue
@@ -2,13 +2,13 @@
   <div class="table-settings">
     <RedoSetting v-if="getSetting.redo" />
     <SizeSetting v-if="getSetting.size" />
-    <ColumnSetting v-if="getSetting.setting" />
+    <ColumnSetting v-if="getSetting.setting" @columns-change="handleColumnChange" />
     <FullScreenSetting v-if="getSetting.fullScreen" />
   </div>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
-  import type { TableSetting } from '../../types/table';
+  import type { TableSetting, ColumnChangeParam } from '../../types/table';
 
   import { defineComponent, computed } from 'vue';
 
@@ -33,7 +33,8 @@
         default: () => ({}),
       },
     },
-    setup(props) {
+    emits: ['columns-change'],
+    setup(props, { emit }) {
       const { t } = useI18n();
 
       const getSetting = computed((): TableSetting => {
@@ -46,7 +47,11 @@
         };
       });
 
-      return { getSetting, t };
+      function handleColumnChange(data: ColumnChangeParam[]) {
+        emit('columns-change', data);
+      }
+
+      return { getSetting, t, handleColumnChange };
     },
   });
 </script>
diff --git a/src/components/Table/src/hooks/useTable.ts b/src/components/Table/src/hooks/useTable.ts
index 58b30502..740420a5 100644
--- a/src/components/Table/src/hooks/useTable.ts
+++ b/src/components/Table/src/hooks/useTable.ts
@@ -2,16 +2,10 @@ import type { BasicTableProps, TableActionType, FetchParams, BasicColumn } from
 import type { PaginationProps } from '../types/pagination';
 import type { DynamicProps } from '/#/utils';
 import type { FormActionType } from '/@/components/Form';
-// import type { WatchStopHandle } from 'vue';
+import type { WatchStopHandle } from 'vue';
 
 import { getDynamicProps } from '/@/utils';
-import {
-  ref,
-  onUnmounted,
-  unref,
-  // watch,
-  toRaw,
-} from 'vue';
+import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
 import { isProdMode } from '/@/utils/env';
 import { error } from '/@/utils/log';
 
@@ -31,7 +25,7 @@ export function useTable(tableProps?: Props): [
   const loadedRef = ref<Nullable<boolean>>(false);
   const formRef = ref<Nullable<UseTableMethod>>(null);
 
-  // let stopWatch: WatchStopHandle;
+  let stopWatch: WatchStopHandle;
 
   function register(instance: TableActionType, formInstance: UseTableMethod) {
     isProdMode() &&
@@ -47,18 +41,18 @@ export function useTable(tableProps?: Props): [
     tableProps && instance.setProps(getDynamicProps(tableProps));
     loadedRef.value = true;
 
-    // stopWatch?.();
+    stopWatch?.();
 
-    // stopWatch = watch(
-    //   () => tableProps,
-    //   () => {
-    //     tableProps && instance.setProps(getDynamicProps(tableProps));
-    //   },
-    //   {
-    //     immediate: true,
-    //     deep: true,
-    //   }
-    // );
+    stopWatch = watch(
+      () => tableProps,
+      () => {
+        tableProps && instance.setProps(getDynamicProps(tableProps));
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
   }
 
   function getTableInstance(): TableActionType {
diff --git a/src/components/Table/src/hooks/useTableHeader.ts b/src/components/Table/src/hooks/useTableHeader.ts
index 93c3ef4a..a3e77a29 100644
--- a/src/components/Table/src/hooks/useTableHeader.ts
+++ b/src/components/Table/src/hooks/useTableHeader.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Slots } from 'vue';
-import type { BasicTableProps } from '../types/table';
+import type { BasicTableProps, InnerHandlers } from '../types/table';
 
 import { unref, computed, h } from 'vue';
 import TableHeader from '../components/TableHeader.vue';
@@ -7,7 +7,11 @@ import TableHeader from '../components/TableHeader.vue';
 import { isString } from '/@/utils/is';
 import { getSlot } from '/@/utils/helper/tsxHelper';
 
-export function useTableHeader(propsRef: ComputedRef<BasicTableProps>, slots: Slots) {
+export function useTableHeader(
+  propsRef: ComputedRef<BasicTableProps>,
+  slots: Slots,
+  handlers: InnerHandlers
+) {
   const getHeaderProps = computed((): Recordable => {
     const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(propsRef);
     const hideTitle = !slots.tableTitle && !title && !slots.toolbar && !showTableSetting;
@@ -26,6 +30,7 @@ export function useTableHeader(propsRef: ComputedRef<BasicTableProps>, slots: Sl
                 titleHelpMessage,
                 showTableSetting,
                 tableSetting,
+                onColumnsChange: handlers.onColumnsChange,
               } as Recordable,
               {
                 ...(slots.toolbar
diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts
index 7e61c015..9b5b217a 100644
--- a/src/components/Table/src/types/table.ts
+++ b/src/components/Table/src/types/table.ts
@@ -381,6 +381,8 @@ export interface BasicTableProps<T = any> {
    * @param expandedRows
    */
   onExpandedRowsChange?: (expandedRows: string[] | number[]) => void;
+
+  onColumnsChange?: (data: ColumnChangeParam[]) => void;
 }
 
 export type CellFormat =
@@ -427,3 +429,13 @@ export interface BasicColumn extends ColumnProps {
   // 业务控制是否显示
   ifShow?: boolean | ((column: BasicColumn) => boolean);
 }
+
+export type ColumnChangeParam = {
+  dataIndex: string;
+  fixed: boolean | 'left' | 'right' | undefined;
+  visible: boolean;
+};
+
+export interface InnerHandlers {
+  onColumnsChange: (data: ColumnChangeParam[]) => void;
+}
diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
index 72223f72..94c280a6 100644
--- a/src/components/Tinymce/src/Editor.vue
+++ b/src/components/Tinymce/src/Editor.vue
@@ -6,6 +6,7 @@
       @done="handleDone"
       v-if="showImageUpload"
       v-show="editorRef"
+      :disabled="disabled"
     />
     <textarea :id="tinymceId" ref="elRef" :style="{ visibility: 'hidden' }"></textarea>
   </div>
@@ -170,6 +171,16 @@
         };
       });
 
+      const disabled = computed(() => {
+        const { options } = props;
+        const getdDisabled = options && Reflect.get(options, 'readonly');
+        const editor = unref(editorRef);
+        if (editor) {
+          editor.setMode(getdDisabled ? 'readonly' : 'design');
+        }
+        return getdDisabled ?? false;
+      });
+
       watch(
         () => attrs.disabled,
         () => {
@@ -301,6 +312,7 @@
         handleDone,
         editorRef,
         fullscreen,
+        disabled,
       };
     },
   });
diff --git a/src/components/Tinymce/src/ImgUpload.vue b/src/components/Tinymce/src/ImgUpload.vue
index 41c8ce6d..2963a50c 100644
--- a/src/components/Tinymce/src/ImgUpload.vue
+++ b/src/components/Tinymce/src/ImgUpload.vue
@@ -8,14 +8,14 @@
       :showUploadList="false"
       accept=".jpg,.jpeg,.gif,.png,.webp"
     >
-      <a-button type="primary">
+      <a-button type="primary" v-bind="{ ...getButtonProps }">
         {{ t('component.upload.imgUpload') }}
       </a-button>
     </Upload>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, computed } from 'vue';
 
   import { Upload } from 'ant-design-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
@@ -29,15 +29,26 @@
       fullscreen: {
         type: Boolean,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: ['uploading', 'done', 'error'],
-    setup(_, { emit }) {
+    setup(props, { emit }) {
       let uploading = false;
 
       const { uploadUrl } = useGlobSetting();
       const { t } = useI18n();
       const { prefixCls } = useDesign('tinymce-img-upload');
 
+      const getButtonProps = computed(() => {
+        const { disabled } = props;
+        return {
+          disabled,
+        };
+      });
+
       function handleChange(info: Recordable) {
         const file = info.file;
         const status = file?.status;
@@ -63,6 +74,7 @@
         handleChange,
         uploadUrl,
         t,
+        getButtonProps,
       };
     },
   });
diff --git a/src/hooks/web/usePermission.ts b/src/hooks/web/usePermission.ts
index 1fce03a8..d96042c0 100644
--- a/src/hooks/web/usePermission.ts
+++ b/src/hooks/web/usePermission.ts
@@ -6,7 +6,7 @@ import { useUserStore } from '/@/store/modules/user';
 
 import { useTabs } from './useTabs';
 
-import router, { resetRouter } from '/@/router';
+import { router, resetRouter } from '/@/router';
 // import { RootRoute } from '/@/router/routes';
 
 import projectSetting from '/@/settings/projectSetting';
diff --git a/src/locales/useLocale.ts b/src/locales/useLocale.ts
index 19fff076..8c645d2a 100644
--- a/src/locales/useLocale.ts
+++ b/src/locales/useLocale.ts
@@ -3,7 +3,7 @@
  */
 import type { LocaleType } from '/#/config';
 
-import moment from 'moment';
+import { updateLocale } from 'moment';
 
 import { i18n } from './setupI18n';
 import { useLocaleStoreWithOut } from '/@/store/modules/locale';
@@ -56,7 +56,7 @@ export function useLocale() {
     const { message, momentLocale, momentLocaleName } = langModule;
 
     globalI18n.setLocaleMessage(locale, message);
-    moment.updateLocale(momentLocaleName, momentLocale);
+    updateLocale(momentLocaleName, momentLocale);
     loadLocalePool.push(locale);
 
     setI18nLanguage(locale);
diff --git a/src/main.ts b/src/main.ts
index a60a3c4c..992480ac 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,11 +5,11 @@ import 'virtual:windi.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 
-import { createApp } from 'vue';
 import App from './App.vue';
+import { createApp } from 'vue';
 import { initAppConfigStore } from '/@/logics/initAppConfig';
 import { setupErrorHandle } from '/@/logics/error-handle';
-import router, { setupRouter } from '/@/router';
+import { router, setupRouter } from '/@/router';
 import { setupRouterGuard } from '/@/router/guard';
 import { setupStore } from '/@/store';
 import { setupGlobDirectives } from '/@/directives';
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index 7d803591..c14d884a 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -1,4 +1,4 @@
-import router from '/@/router';
+import { router } from '/@/router';
 
 import { createProgressGuard } from './progressGuard';
 import { createPermissionGuard } from './permissionGuard';
diff --git a/src/router/index.ts b/src/router/index.ts
index 75b06820..3d9700f7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,9 +8,9 @@ import { REDIRECT_NAME } from './constant';
 const WHITE_NAME_LIST = [LoginRoute.name, REDIRECT_NAME];
 
 // app router
-const router = createRouter({
+export const router = createRouter({
   history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
-  routes: (basicRoutes as unknown) as RouteRecordRaw[],
+  routes: basicRoutes as unknown as RouteRecordRaw[],
   strict: true,
   scrollBehavior: () => ({ left: 0, top: 0 }),
 });
@@ -29,5 +29,3 @@ export function resetRouter() {
 export function setupRouter(app: App<Element>) {
   app.use(router);
 }
-
-export default router;
diff --git a/src/router/menus/index.ts b/src/router/menus/index.ts
index 5b23d703..d7fe6091 100644
--- a/src/router/menus/index.ts
+++ b/src/router/menus/index.ts
@@ -6,7 +6,7 @@ import { usePermissionStore } from '/@/store/modules/permission';
 import { transformMenuModule, getAllParentPath } from '/@/router/helper/menuHelper';
 import { filter } from '/@/utils/helper/treeHelper';
 import { isUrl } from '/@/utils/is';
-import router from '/@/router';
+import { router } from '/@/router';
 import { PermissionModeEnum } from '/@/enums/appEnum';
 import { pathToRegexp } from 'path-to-regexp';
 
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 3a07e3ad..9b2297a2 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -15,7 +15,7 @@ import { getUserInfo, loginApi } from '/@/api/sys/user';
 
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useMessage } from '/@/hooks/web/useMessage';
-import router from '/@/router';
+import { router } from '/@/router';
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
diff --git a/src/utils/propTypes.ts b/src/utils/propTypes.ts
index 8e0c7156..a5b0a47a 100644
--- a/src/utils/propTypes.ts
+++ b/src/utils/propTypes.ts
@@ -30,11 +30,5 @@ propTypes.extend([
     getter: true,
     type: undefined,
   },
-  // {
-  //   name: 'trueBool',
-  //   getter: true,
-  //   type: Boolean,
-  //   default: true,
-  // },
 ]);
 export { propTypes };
diff --git a/src/views/demo/table/Basic.vue b/src/views/demo/table/Basic.vue
index 48cde076..4d8e88cd 100644
--- a/src/views/demo/table/Basic.vue
+++ b/src/views/demo/table/Basic.vue
@@ -11,6 +11,7 @@
       :bordered="border"
       showTableSetting
       :pagination="pagination"
+      @columns-change="handleColumnChange"
     >
       <template #toolbar>
         <a-button type="primary" @click="toggleCanResize">
@@ -29,7 +30,7 @@
 </template>
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
-  import { BasicTable } from '/@/components/Table';
+  import { BasicTable, ColumnChangeParam } from '/@/components/Table';
   import { getBasicColumns, getBasicData } from './tableData';
 
   export default defineComponent({
@@ -56,6 +57,11 @@
       function toggleBorder() {
         border.value = !border.value;
       }
+
+      function handleColumnChange(data: ColumnChangeParam[]) {
+        console.log('ColumnChanged', data);
+      }
+
       return {
         columns: getBasicColumns(),
         data: getBasicData(),
@@ -68,6 +74,7 @@
         toggleLoading,
         toggleBorder,
         pagination,
+        handleColumnChange,
       };
     },
   });
diff --git a/src/views/demo/table/UseTable.vue b/src/views/demo/table/UseTable.vue
index 861ab0cb..c20c1bec 100644
--- a/src/views/demo/table/UseTable.vue
+++ b/src/views/demo/table/UseTable.vue
@@ -20,7 +20,7 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+  import { BasicTable, ColumnChangeParam, useTable } from '/@/components/Table';
   import { getBasicColumns, getBasicShortColumns } from './tableData';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { demoListApi } from '/@/api/demo/table';
@@ -58,6 +58,9 @@
         rowSelection: {
           type: 'checkbox',
         },
+        onColumnsChange: (data: ColumnChangeParam[]) => {
+          console.log('ColumnsChanged', data);
+        },
       });
 
       function changeLoading() {
diff --git a/yarn.lock b/yarn.lock
index 81e33010..51f60f8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1164,15 +1164,15 @@
   resolved "https://registry.npmjs.org/@emmetio/scanner/-/scanner-1.0.0.tgz#065b2af6233fe7474d44823e3deb89724af42b5f"
   integrity sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==
 
-"@eslint/eslintrc@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz#442763b88cecbe3ee0ec7ca6d6dd6168550cbf14"
-  integrity sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==
+"@eslint/eslintrc@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
+  integrity sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==
   dependencies:
     ajv "^6.12.4"
     debug "^4.1.1"
     espree "^7.3.0"
-    globals "^12.1.0"
+    globals "^13.9.0"
     ignore "^4.0.6"
     import-fresh "^3.2.1"
     js-yaml "^3.13.1"
@@ -1243,10 +1243,10 @@
   dependencies:
     cross-fetch "^3.0.6"
 
-"@iconify/json@^1.1.350":
-  version "1.1.350"
-  resolved "https://registry.yarnpkg.com/@iconify/json/-/json-1.1.350.tgz#abd66f4ef1250306f7ce088dac637ea0d781e694"
-  integrity sha512-pNHlRLZCbNsk7WXZfFGPa1no3oOi5KcWFyo1Pk3cQJzPhHEqqpV7zImAGW4WJrxhlRkv/6wzZVcBF5xhkp4Avw==
+"@iconify/json@^1.1.353":
+  version "1.1.353"
+  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.353.tgz#f9fb632da9b13cd79bcbea09b289610c46b87426"
+  integrity sha512-gN+DccJUhO6iB7gBPbZXodDaaxZpZTLORixrXaXNmkSW7N/jqfzMCCogoeRWOydZzSgR7VESc2tMI4llEonkjg==
 
 "@intlify/core-base@9.1.6":
   version "9.1.6"
@@ -1813,10 +1813,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.1.tgz#5e07e0cb2ff793aa7a1b41deae76221e6166049f"
   integrity sha512-/tpUyFD7meeooTRwl3sYlihx2BrJE7q9XF71EguPFIySj9B7qgnRtHsHTho+0AUm4m1SvWGm6uSncrR94q6Vtw==
 
-"@types/node@^15.12.0":
-  version "15.12.0"
-  resolved "https://registry.npmjs.org/@types/node/-/node-15.12.0.tgz#6a459d261450a300e6865faeddb5af01c3389bb3"
-  integrity sha512-+aHJvoCsVhO2ZCuT4o5JtcPrCPyDE3+1nvbDprYes+pPkEsbjH7AGUCNtjMOXS0fqH14t+B7yLzaqSz92FPWyw==
+"@types/node@^15.12.1":
+  version "15.12.1"
+  resolved "https://registry.npmjs.org/@types/node/-/node-15.12.1.tgz#9b60797dee1895383a725f828a869c86c6caa5c2"
+  integrity sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -2345,7 +2345,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
 
 ant-design-vue@2.1.2:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-2.1.2.tgz#2065d7e63199c0c584919458af57b6a0b597f677"
+  resolved "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.1.2.tgz#2065d7e63199c0c584919458af57b6a0b597f677"
   integrity sha512-gDG0wauGVt4LE63behrJaIcq4BB+dgs+dpj9jz17IgKr2MPYSEeKetU/x9Kk8d58cGonz4Ulncg7fBZJ7EljsQ==
   dependencies:
     "@ant-design-vue/use" "^0.0.1-0"
@@ -4803,6 +4803,13 @@ es6-error@^4.1.1:
   resolved "https://registry.npm.taobao.org/es6-error/download/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
   integrity sha1-njr0B0Wd7tR+mpH5uIWoTrBcVh0=
 
+esbuild-node-loader@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.npmjs.org/esbuild-node-loader/-/esbuild-node-loader-0.0.0.tgz#2243724e6f57e401ac5b68a6aeb6531e3d7c6078"
+  integrity sha512-f4Zs1sWMst3PwVfiRpZIos/BV31a8KVSyIXodXeQjNkgc1mLIBKw7p0uY7qbLoq7ICfrsQJgvXIwPHRSHd5qSA==
+  dependencies:
+    esbuild "^0.12.6"
+
 esbuild-plugin-alias@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/esbuild-plugin-alias/-/esbuild-plugin-alias-0.1.2.tgz#1232fbde807c0c8ad44c44ec859819eb492e12a8"
@@ -4841,6 +4848,11 @@ esbuild@^0.12.5:
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.5.tgz#36076a6bc1966ba2741981d30512e95e8aaff495"
   integrity sha512-vcuP53pA5XiwUU4FnlXM+2PnVjTfHGthM7uP1gtp+9yfheGvFFbq/KyuESThmtoHPUrfZH5JpxGVJIFDVD1Egw==
 
+esbuild@^0.12.6:
+  version "0.12.6"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.12.6.tgz#85bc755c7cf3005d4f34b4f10f98049ce0ee67ce"
+  integrity sha512-RDvVLvAjsq/kIZJoneMiUOH7EE7t2QaW7T3Q7EdQij14+bZbDq5sndb0tTanmHIFSqZVMBMMyqzVHkS3dJobeA==
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -4925,13 +4937,13 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
-eslint@^7.27.0:
-  version "7.27.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz#665a1506d8f95655c9274d84bd78f7166b07e9c7"
-  integrity sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==
+eslint@^7.28.0:
+  version "7.28.0"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz#435aa17a0b82c13bb2be9d51408b617e49c1e820"
+  integrity sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==
   dependencies:
     "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.1"
+    "@eslint/eslintrc" "^0.4.2"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -4948,7 +4960,7 @@ eslint@^7.27.0:
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
+    glob-parent "^5.1.2"
     globals "^13.6.0"
     ignore "^4.0.6"
     import-fresh "^3.0.0"
@@ -4970,13 +4982,14 @@ eslint@^7.27.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-esno@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/esno/-/esno-0.6.0.tgz#9e00c314840f314fcb92f7ef89258ed1be37471d"
-  integrity sha512-fzk7/w3I9f1c6oJ6E9qGN54rEYwweM2/LxGhW8iDrhkY4VnQvpavYS6pK3SF8iZgEvmtXsY7i9fs/D09o3Xdtg==
+esno@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/esno/-/esno-0.7.0.tgz#2bec5e80eff53b60d528d6cf244445677cce7d4c"
+  integrity sha512-tOcvMYheRc7dfrxWkm4bYgmMkcNZUSt892qVY66int4L+jkEJGc64fZLx8+cZffMIcHp+4IfaTB+r+X7SoRh+g==
   dependencies:
     cross-spawn "^7.0.3"
     esbuild "^0.12.5"
+    esbuild-node-loader "^0.0.0"
     esbuild-register "^2.5.0"
 
 espree@^6.2.1:
@@ -5750,7 +5763,7 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
+glob-parent@^5.1.0, glob-parent@^5.1.2, glob-parent@~5.1.0:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -5871,13 +5884,6 @@ globals@^11.1.0:
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^12.1.0:
-  version "12.4.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
-  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
-  dependencies:
-    type-fest "^0.8.1"
-
 globals@^13.6.0:
   version "13.8.0"
   resolved "https://registry.npmjs.org/globals/-/globals-13.8.0.tgz#3e20f504810ce87a8d72e55aecf8435b50f4c1b3"
@@ -5885,6 +5891,13 @@ globals@^13.6.0:
   dependencies:
     type-fest "^0.20.2"
 
+globals@^13.9.0:
+  version "13.9.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz#4bf2bf635b334a173fb1daf7c5e6b218ecdc06cb"
+  integrity sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==
+  dependencies:
+    type-fest "^0.20.2"
+
 globalthis@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/globalthis/download/globalthis-1.0.2.tgz#2a235d34f4d8036219f7e34929b5de9e18166b8b"
@@ -6786,7 +6799,7 @@ is-jpg@^2.0.0:
 
 is-mobile@^2.2.1:
   version "2.2.2"
-  resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-2.2.2.tgz#f6c9c5d50ee01254ce05e739bdd835f1ed4e9954"
+  resolved "https://registry.npmjs.org/is-mobile/-/is-mobile-2.2.2.tgz#f6c9c5d50ee01254ce05e739bdd835f1ed4e9954"
   integrity sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg==
 
 is-module@^1.0.0:
@@ -9022,10 +9035,10 @@ prettier@^1.16.4, prettier@^1.18.2:
   resolved "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-prettier@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
-  integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
+prettier@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz#76903c3f8c4449bc9ac597acefa24dc5ad4cbea6"
+  integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==
 
 pretty-bytes@^5.3.0, pretty-bytes@^5.6.0:
   version "5.6.0"
@@ -9755,10 +9768,10 @@ rollup-plugin-visualizer@5.5.0:
     source-map "^0.7.3"
     yargs "^16.2.0"
 
-rollup@^2.38.5, rollup@^2.43.1, rollup@^2.45.2, rollup@^2.50.6:
+rollup@^2.38.5, rollup@^2.43.1, rollup@^2.45.2, rollup@^2.51.0:
   version "2.51.0"
-  resolved "https://registry.nlark.com/rollup/download/rollup-2.51.0.tgz#ffd847882283998fc8611cd57af917f173b4ab5c"
-  integrity sha1-/9hHiCKDmY/IYRzVevkX8XO0q1w=
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.51.0.tgz#ffd847882283998fc8611cd57af917f173b4ab5c"
+  integrity sha512-ITLt9sScNCBVspSHauw/W49lEZ0vjN8LyCzSNsNaqT67vTss2lYEfOyxltX8hjrhr1l/rQwmZ2wazzEqhZ/fUg==
   optionalDependencies:
     fsevents "~2.3.1"