ele-admin-plus 1.2.1-beta.1 → 1.2.1-beta.3

package/es/ele-pro-table/index.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, shallowRef, computed, watch, onMounted, nextTick, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, mergeProps as mergeProps$1, renderSlot, createSlots, renderList, createCommentVNode, createElementBlock, normalizeStyle } from "vue";
-import { pick, getValue } from "../utils/core";
+import { defineComponent, computed, ref, shallowRef, watch, onMounted, nextTick, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, mergeProps as mergeProps$1, renderSlot, createSlots, renderList, createCommentVNode, createElementBlock, normalizeStyle } from "vue";
+import { mapTree, pick, getValue } from "../utils/core";
 import { useGlobalProps } from "../ele-config-provider/receiver";
 import EleLoading from "../ele-loading/index";
 import ElePagination from "../ele-pagination/index";
@@ -9,8 +9,12 @@ import EleDataTable from "../ele-data-table/index";
 import EleVirtualTable from "../ele-virtual-table/index";
 import EleToolbar from "../ele-toolbar/index";
 import TableTools from "./components/table-tools";
-import { getDefaultFilter, getTablePage, getTableLimit, getTableSize, getRowKey, getPaginationProps, mergeProps, getInitCacheColumns, reloadData, getRequestOrders, getRequestPages, getRequestFilters, getResponseResult, getResponseName, isAutoAmend, sortData } from "./util";
+import { getDefaultFilter, getTablePage, getTableLimit, getTableSize, getRowKey, getPaginationProps, mergeProps, cacheColWidth, getInitCacheColumns, reloadData, getRequestOrders, getRequestPages, getRequestFilters, getResponseResult, getResponseName, isAutoAmend, sortData } from "./util";
 import { proTableProps, proTableEmits } from "./props";
+const ownSlots = ["default", "toolbar", "tools", "footer"];
+const toolsSlotExcludes = [...ownSlots, "empty", "append"];
+const tableSlotExcludes = [...ownSlots, "printTop", "printBottom"];
+const pageSlotExcludes = [...toolsSlotExcludes, "printTop", "printBottom"];
 const _sfc_main = defineComponent({
   name: "EleProTable",
   components: {
@@ -27,11 +31,19 @@ const _sfc_main = defineComponent({
     const events = useEmits(emit);
     const methods = useMethods(() => getTableRef());
     const globalProps = useGlobalProps("table");
+    const userColumns = computed(() => {
+      return mapTree(props.columns, (item) => {
+        if (item.vIf == null || (typeof item.vIf === "function" ? item.vIf() : item.vIf)) {
+          return item;
+        }
+      });
+    });
     const tableState = {
       sorter: props.defaultSort ?? {},
-      filter: getDefaultFilter(props.columns),
+      filter: getDefaultFilter(userColumns.value),
       where: props.where ?? {}
     };
+    const tableToolsRef = ref(null);
     const tableViewRef = ref(null);
     const tableData = ref([]);
     const tablePage = ref(
@@ -95,10 +107,11 @@ const _sfc_main = defineComponent({
         style: props.tableStyle,
         class: "ele-pro-table-view",
         ...events,
-        onSelectionChange,
-        onSortChange,
-        onFilterChange,
-        onCurrentChange
+        onSelectionChange: handleSelectionChange,
+        onSortChange: handleSortChange,
+        onFilterChange: handleFilterChange,
+        onCurrentChange: handleCurrentChange,
+        onHeaderDragend: handleHeaderDragend
       };
     });
     const toolNames = computed(() => {
@@ -108,6 +121,12 @@ const _sfc_main = defineComponent({
       }
       return tools || [];
     });
+    const tableToolbarProps = computed(() => {
+      return mergeProps(
+        props.toolbar,
+        globalProps.value.toolbar
+      );
+    });
     const toolExportConfig = computed(() => {
       const globalExportConfig = globalProps.value.exportConfig || {};
       const userExportConfig = props.exportConfig || {};
@@ -184,7 +203,7 @@ const _sfc_main = defineComponent({
         tableData.value = data;
         tablePage.value = page;
         tableTotal.value = total;
-        onDone({ data, page, total, response: props.datasource });
+        handleDone({ data, page, total, response: props.datasource });
         return;
       }
       if (!parent) {
@@ -269,7 +288,7 @@ const _sfc_main = defineComponent({
         total: tableTotal.value,
         response
       };
-      onDone(result, parent);
+      handleDone(result, parent);
     };
     const tableLoad = (row, treeNode, resolve) => {
       if (props.load) {
@@ -278,7 +297,7 @@ const _sfc_main = defineComponent({
       }
       reload(void 0, row, resolve);
     };
-    const onDone = (result, parent) => {
+    const handleDone = (result, parent) => {
       nextTick(() => {
         if (props.current != null) {
           methods.setCurrentRowKey(
@@ -293,52 +312,62 @@ const _sfc_main = defineComponent({
       });
       emit("done", result, parent);
     };
-    const onRefresh = () => {
+    const handleRefresh = () => {
       if (isFunctionSource.value) {
         reload();
         return;
       }
       emit("refresh");
     };
-    const onSizeChange = (size) => {
+    const handleSizeChange = (size) => {
       tableSize.value = size;
       emit("sizeChange", size);
     };
-    const onColumnsChange = (columns) => {
+    const handleColumnsChange = (columns, tableColumns) => {
       tableCols.value = columns;
-      emit("columnsChange", columns);
+      emit("columnsChange", columns, tableColumns);
     };
-    const onMaximizedChange = (maximized) => {
+    const handleMaximizedChange = (maximized) => {
       tableMaximized.value = maximized;
       emit("maximizedChange", maximized);
     };
-    const onPageSizeChange = (limit) => {
+    const handlePageSizeChange = (limit) => {
+      if (tableTotal.value !== "*") {
+        const maxPage = Math.ceil(tableTotal.value / limit);
+        if (maxPage && tablePage.value > maxPage) {
+          tablePage.value = maxPage;
+        }
+      }
       tableLimit.value = limit;
       reload();
     };
-    const onPageCurrentChange = (page) => {
+    const handlePageCurrentChange = (page) => {
       tablePage.value = page;
       reload();
     };
-    const onSortChange = (sorter) => {
+    const handleSortChange = (sorter) => {
       if (props.loadOnChanged) {
         tableState.sorter = sorter;
         reload();
       }
       events.onSortChange(sorter);
     };
-    const onFilterChange = (filter) => {
+    const handleFilterChange = (filter) => {
       if (props.loadOnChanged) {
         tableState.filter = filter;
         reload();
       }
       events.onFilterChange(filter);
     };
-    const onCurrentChange = (currentRow, oldCurrentRow) => {
+    const handleHeaderDragend = (newWidth, oldWidth, column, event) => {
+      cacheColWidth(newWidth, column, props.cacheKey);
+      events.onHeaderDragend(newWidth, oldWidth, column, event);
+    };
+    const handleCurrentChange = (currentRow, oldCurrentRow) => {
       updateCurrent(currentRow);
       events.onCurrentChange(currentRow, oldCurrentRow);
     };
-    const onSelectionChange = (selection) => {
+    const handleSelectionChange = (selection) => {
       updateSelections(selection);
       events.onSelectionChange(selection);
     };
@@ -399,8 +428,28 @@ const _sfc_main = defineComponent({
         filter
       });
     };
+    const openPrintModal = () => {
+      if (tableToolsRef.value) {
+        tableToolsRef.value.openPrintModal();
+      }
+    };
+    const printData = (params) => {
+      if (tableToolsRef.value) {
+        tableToolsRef.value.printData(params);
+      }
+    };
+    const openExportModal = () => {
+      if (tableToolsRef.value) {
+        tableToolsRef.value.openExportModal();
+      }
+    };
+    const exportData = (params) => {
+      if (tableToolsRef.value) {
+        tableToolsRef.value.exportData(params);
+      }
+    };
     watch(
-      () => props.columns,
+      userColumns,
       (columns) => {
         if (columns) {
           tableCols.value = getInitCacheColumns(
@@ -412,10 +461,7 @@ const _sfc_main = defineComponent({
           tableCols.value = [];
         }
       },
-      {
-        immediate: true,
-        deep: true
-      }
+      { immediate: true, deep: true }
     );
     watch(
       () => props.datasource,
@@ -471,7 +517,12 @@ const _sfc_main = defineComponent({
       }
     });
     return {
+      toolsSlotExcludes,
+      tableSlotExcludes,
+      pageSlotExcludes,
       ...methods,
+      userColumns,
+      tableToolsRef,
       tableViewRef,
       tableData,
       tableSize,
@@ -480,22 +531,27 @@ const _sfc_main = defineComponent({
       paginationProps,
       tableProps,
       toolNames,
+      tableToolbarProps,
       toolExportConfig,
       toolPrintConfig,
       loadingProps,
-      onRefresh,
-      onSizeChange,
-      onColumnsChange,
-      onMaximizedChange,
-      onPageSizeChange,
-      onPageCurrentChange,
+      handleRefresh,
+      handleSizeChange,
+      handleColumnsChange,
+      handleMaximizedChange,
+      handlePageSizeChange,
+      handlePageCurrentChange,
       reload,
       reloadTable,
       getTableRef,
       getData,
       setData,
       goPageByRowKey,
-      fetch
+      fetch,
+      openPrintModal,
+      printData,
+      openExportModal,
+      exportData
     };
   }
 });
@@ -515,14 +571,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleLoading = resolveComponent("EleLoading");
   return openBlock(), createBlock(_component_EleLoading, normalizeProps(guardReactiveProps(_ctx.loadingProps)), {
     default: withCtx(() => [
-      _ctx.toolbar ? (openBlock(), createBlock(_component_EleToolbar, normalizeProps(mergeProps$1({ key: 0 }, _ctx.toolbar === true ? {} : _ctx.toolbar)), {
+      _ctx.tableToolbarProps ? (openBlock(), createBlock(_component_EleToolbar, normalizeProps(mergeProps$1({ key: 0 }, _ctx.tableToolbarProps === true ? {} : _ctx.tableToolbarProps)), {
         tools: withCtx(() => [
           renderSlot(_ctx.$slots, "tools"),
           _ctx.toolNames && _ctx.toolNames.length ? (openBlock(), createBlock(_component_TableTools, {
             key: 0,
+            ref: "tableToolsRef",
             tools: _ctx.toolNames,
             size: _ctx.tableSize,
-            columns: _ctx.columns,
+            columns: _ctx.userColumns,
             columnSortable: _ctx.columnSortable,
             columnFixed: _ctx.columnFixed,
             maximized: _ctx.tableMaximized,
@@ -544,20 +601,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             fetch: _ctx.fetch,
             exportConfig: _ctx.toolExportConfig,
             printConfig: _ctx.toolPrintConfig,
-            onReload: _ctx.onRefresh,
-            "onUpdate:size": _ctx.onSizeChange,
-            "onUpdate:columns": _ctx.onColumnsChange,
-            "onUpdate:maximized": _ctx.onMaximizedChange
+            onReload: _ctx.handleRefresh,
+            "onUpdate:size": _ctx.handleSizeChange,
+            "onUpdate:columns": _ctx.handleColumnsChange,
+            "onUpdate:maximized": _ctx.handleMaximizedChange
           }, createSlots({ _: 2 }, [
             renderList(Object.keys(_ctx.$slots).filter(
-              (k) => ![
-                "default",
-                "toolbar",
-                "tools",
-                "footer",
-                "empty",
-                "append"
-              ].includes(k)
+              (k) => !_ctx.toolsSlotExcludes.includes(k)
             ), (name) => {
               return {
                 name,
@@ -576,14 +626,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default"),
       _ctx.virtual ? (openBlock(), createBlock(_component_EleVirtualTable, mergeProps$1({ key: 1 }, _ctx.tableProps, { ref: "tableViewRef" }), createSlots({ _: 2 }, [
         renderList(Object.keys(_ctx.$slots).filter(
-          (k) => ![
-            "default",
-            "toolbar",
-            "tools",
-            "footer",
-            "printTop",
-            "printBottom"
-          ].includes(k)
+          (k) => !_ctx.tableSlotExcludes.includes(k)
         ), (name) => {
           return {
             name,
@@ -594,14 +637,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         })
       ]), 1040)) : (openBlock(), createBlock(_component_EleDataTable, mergeProps$1({ key: 2 }, _ctx.tableProps, { ref: "tableViewRef" }), createSlots({ _: 2 }, [
         renderList(Object.keys(_ctx.$slots).filter(
-          (k) => ![
-            "default",
-            "toolbar",
-            "tools",
-            "footer",
-            "printTop",
-            "printBottom"
-          ].includes(k)
+          (k) => !_ctx.tableSlotExcludes.includes(k)
         ), (name) => {
           return {
             name,
@@ -618,20 +654,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, [
         renderSlot(_ctx.$slots, "footer"),
         _ctx.paginationProps && _ctx.paginationProps.total ? (openBlock(), createBlock(_component_ElePagination, mergeProps$1({ key: 0 }, _ctx.paginationProps, {
-          "onUpdate:currentPage": _ctx.onPageCurrentChange,
-          "onUpdate:pageSize": _ctx.onPageSizeChange
+          "onUpdate:currentPage": _ctx.handlePageCurrentChange,
+          "onUpdate:pageSize": _ctx.handlePageSizeChange
         }), createSlots({ _: 2 }, [
           renderList(Object.keys(_ctx.$slots).filter(
-            (k) => ![
-              "default",
-              "toolbar",
-              "tools",
-              "footer",
-              "empty",
-              "append",
-              "printTop",
-              "printBottom"
-            ].includes(k)
+            (k) => !_ctx.pageSlotExcludes.includes(k)
           ), (name) => {
             return {
               name,

package/es/ele-pro-table/props.d.ts

@@ -1,14 +1,15 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
 import { EleLoadingProps, EleToolbarProps } from '../ele-app/plus';
-import { DataItem, Columns, TableSize } from '../ele-data-table/types';
-import { Where, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableLocale, ExportConfig, PrintConfig } from './types';
+import { DataItem, Columns, TableSize, RowKey } from '../ele-data-table/types';
+import { Where, Datasource, RequestOption, ResponseOption, ParseData, DoneParams, TablePagination, TableTool, TableLocale, ExportConfig, PrintConfig } from './types';
 
 /**
  * 属性
  */
 export declare const proTableProps: {
     rowKey: {
-        type: PropType<string | ((row: DataItem) => string) | undefined>;
+        type: PropType<RowKey>;
         required: boolean;
     };
     /** 数据请求状态 */
@@ -43,11 +44,11 @@ export declare const proTableProps: {
     /** 是否开启顶部工具栏 */
     toolbar: {
         type: PropType<boolean | EleToolbarProps>;
-        default: boolean;
+        default: () => null;
     };
     /** 表头工具按钮布局 */
     tools: {
-        type: PropType<boolean | string[]>;
+        type: PropType<TableTool[] | boolean>;
         default: () => null;
     };
     /** 列配置是否可拖拽排序 */
@@ -65,9 +66,9 @@ export declare const proTableProps: {
     /** 表格全屏状态的高度 */
     maximizedHeight: (StringConstructor | NumberConstructor)[];
     /** 自定义表格样式 */
-    tableStyle: PropType<Partial<import('vue').CSSProperties>>;
+    tableStyle: PropType<StyleValue>;
     /** 自定义底部样式 */
-    footerStyle: PropType<Partial<import('vue').CSSProperties>>;
+    footerStyle: PropType<StyleValue>;
     /** 分页组件 */
     pagination: {
         type: PropType<boolean | TablePagination>;
@@ -98,14 +99,14 @@ export declare const proTableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    width: (StringConstructor | NumberConstructor)[];
-    maxHeight: (StringConstructor | NumberConstructor)[];
+    width: (NumberConstructor | StringConstructor)[];
+    maxHeight: (NumberConstructor | StringConstructor)[];
     lazy: BooleanConstructor;
     className: {
         type: StringConstructor;
         default: string;
     };
-    height: (StringConstructor | NumberConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
     stripe: {
         type: BooleanConstructor;
         default: null;
@@ -130,13 +131,13 @@ export declare const proTableProps: {
     headerCellClassName: PropType<import('element-plus').CellCls<any> | undefined>;
     headerCellStyle: PropType<import('element-plus').CellStyle<any> | undefined>;
     highlightCurrentRow: BooleanConstructor;
-    currentRowKey: (StringConstructor | NumberConstructor)[];
+    currentRowKey: (NumberConstructor | StringConstructor)[];
     emptyText: StringConstructor;
     expandRowKeys: PropType<any[] | undefined>;
     defaultExpandAll: BooleanConstructor;
     defaultSort: PropType<import('element-plus').Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    tooltipOptions: PropType<Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperClass" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "appendTo" | "transition" | "showArrow">> | undefined>;
     spanMethod: PropType<((data: {
         row: any;
         rowIndex: number;
@@ -170,7 +171,7 @@ export declare const proTableProps: {
     };
     scrollbarAlwaysOn: BooleanConstructor;
     flexible: BooleanConstructor;
-    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "effect" | "placement" | "popperClass" | "offset" | "popperOptions" | "appendTo" | "transition" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    showOverflowTooltip: PropType<boolean | Partial<Pick<import('element-plus').ElTooltipProps, "offset" | "effect" | "placement" | "popperClass" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "appendTo" | "transition" | "showArrow">> | undefined>;
     columns: {
         type: PropType<Columns>;
         required: boolean;
@@ -186,7 +187,6 @@ export declare const proTableProps: {
     };
     bottomLine: {
         type: BooleanConstructor;
-        /** 自定义响应参数名称 */
         default: boolean;
     };
     emptyProps: {
@@ -209,7 +209,7 @@ export declare const proTableEmits: {
     /** 更新单选选中数据 */
     'update:current': (_current?: DataItem | null) => boolean;
     /** 列配置改变事件 */
-    columnsChange: (_columns: Columns) => boolean;
+    columnsChange: (_columns: Columns, _tableColumns: Columns) => boolean;
     /** 表格尺寸改变事件 */
     sizeChange: (_size: TableSize) => boolean;
     /** 表格最大化切换事件 */
@@ -226,15 +226,14 @@ export declare const proTableEmits: {
     cellContextmenu: (_row: DataItem, _column: import('./types').Column, _cell: HTMLTableCellElement, _e: MouseEvent) => boolean;
     rowClick: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
     rowContextmenu: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
-    /** 导出配置 */
     rowDblclick: (_row: DataItem, _column: import('./types').Column, _e: MouseEvent) => boolean;
     headerClick: (_column: import('./types').Column, _e: MouseEvent) => boolean;
     headerContextmenu: (_column: import('./types').Column, _e: MouseEvent) => boolean;
     sortChange: (_sorter: import('./types').Sorter) => boolean;
     filterChange: (_filter: import('./types').Filter) => boolean;
-    currentChange: (_current?: DataItem | null | undefined, _old?: DataItem | null | undefined) => boolean;
+    currentChange: (_current?: DataItem | null, _old?: DataItem | null) => boolean;
     headerDragend: (_width: number, _old: number, _column: import('./types').Column, _e: MouseEvent) => boolean;
     expandChange: (_row: DataItem, _expanded: boolean) => boolean;
-    'update:currentRowKey': (_currentRowKey?: import('../ele-data-table/types').DataKey | undefined) => boolean;
-    'update:selectedRowKeys': (_selectedRowKeys?: import('../ele-data-table/types').DataKey[] | undefined) => boolean; /** 数组数据源时刷新按钮点击事件 */
+    'update:currentRowKey': (_currentRowKey?: import('../ele-data-table/types').DataKey) => boolean;
+    'update:selectedRowKeys': (_selectedRowKeys?: import('../ele-data-table/types').DataKey[]) => boolean;
 };

package/es/ele-pro-table/props.js

@@ -38,7 +38,9 @@ const proTableProps = {
   /** 是否开启顶部工具栏 */
   toolbar: {
     type: [Boolean, Object],
-    default: true
+    default: () => {
+      return null;
+    }
   },
   /** 表头工具按钮布局 */
   tools: {
@@ -96,7 +98,7 @@ const proTableEmits = {
   /** 更新单选选中数据 */
   "update:current": (_current) => true,
   /** 列配置改变事件 */
-  columnsChange: (_columns) => true,
+  columnsChange: (_columns, _tableColumns) => true,
   /** 表格尺寸改变事件 */
   sizeChange: (_size) => true,
   /** 表格最大化切换事件 */

package/es/ele-pro-table/style/index.scss

@@ -91,6 +91,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
   overflow: auto;
   padding: 0 0 16px 0;
   box-sizing: border-box;
@@ -118,6 +119,10 @@
 /* 密度设置 */
 .ele-tool-size-popper {
   min-width: 88px;
+
+  &.ele-dropdown .el-dropdown-menu__item > .el-icon {
+    font-size: elVar('font-size', 'base');
+  }
 }
 
 /* 列配置 */
@@ -143,6 +148,7 @@
 .ele-tool-column-link {
   color: elVar('color-primary');
   transition: color $transition-base;
+  user-select: none;
   cursor: pointer;
 
   &:hover {
@@ -198,6 +204,7 @@
 }
 
 .ele-tool-column-item {
+  user-select: none;
   border-radius: eleVar('tool-column', 'item-radius');
 
   &.sortable-chosen {
@@ -219,25 +226,53 @@
 }
 
 .ele-tool-column-handle {
+  flex-shrink: 0;
   display: flex;
-  font-size: 12px;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('tool-column', 'btn-size');
+  height: eleVar('tool-column', 'btn-size');
+  margin-right: eleVar('tool-column', 'btn-space');
+  margin-left: eleVar('tool-column', 'btn-offset');
   color: elVar('text-color', 'placeholder');
-  margin-right: 4px;
+  font-size: 12px;
   cursor: move;
 }
 
+.ele-tool-column-input {
+  flex-shrink: 0;
+  width: 60px;
+  background: elVar('bg-color', 'overlay');
+  border-radius: elVar('border-radius', 'base');
+  margin-left: eleVar('tool-column', 'btn-space');
+  margin-right: eleVar('tool-column', 'btn-offset');
+
+  .el-input__inner {
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
 .ele-tool-column-fixed {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
+
+  &:last-child {
+    margin-right: eleVar('tool-column', 'btn-offset');
+  }
 }
 
 .ele-tool-column-fixed-item {
   display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('tool-column', 'btn-size');
+  height: eleVar('tool-column', 'btn-size');
+  border-radius: eleVar('tool-column', 'btn-radius');
   font-size: 12px;
   color: eleVar('tool-column', 'btn-color');
-  padding: eleVar('tool-column', 'btn-padding');
   margin-left: eleVar('tool-column', 'btn-space');
-  border-radius: eleVar('tool-column', 'btn-radius');
   transition: (color $transition-base, background-color $transition-base);
   box-sizing: border-box;
   cursor: pointer;
@@ -257,14 +292,11 @@
   }
 }
 
-.ele-tool-column.is-sortable {
-  .ele-tool-column-item-body {
-    padding-left: 6px;
-  }
-
-  .ele-tool-column-header .ele-tool-column-label {
-    padding-left: calc(22px - #{eleVar('tool-column', 'item-padding')});
-  }
+.ele-tool-column.is-sortable .ele-tool-column-header .ele-tool-column-label {
+  $size: eleVar('tool-column', 'btn-size');
+  $space: eleVar('tool-column', 'btn-space');
+  $offset: eleVar('tool-column', 'btn-offset');
+  padding-left: calc(#{$size} + #{$space} + #{$offset});
 }
 
 /* 导出和打印的列选择 */