vxe-table 4.6.5 → 4.6.6

package/lib/index.umd.js

@@ -2470,7 +2470,7 @@ const GlobalConfig = {
 ;// CONCATENATED MODULE: ./packages/tools/log.ts
 
 function getLog(message, params) {
-  return `[vxe-table v${"4.6.5"}] ${conf.i18n(message, params)}`;
+  return `[vxe-table v${"4.6.6"}] ${conf.i18n(message, params)}`;
 }
 function outLog(type) {
   return function (message, params) {
@@ -2887,12 +2887,12 @@ class ColumnInfo {
       rowSpan: 1,
       // 跨列
       colSpan: 1,
-      // 数据排序-自定义排序
+      // 数据排序
       order: null,
-      // 数据排序-用于多列的先后顺序
       sortTime: 0,
       // 列排序
-      customOrder: 0,
+      sortNumber: 0,
+      renderSortNumber: 0,
       renderWidth: 0,
       renderHeight: 0,
       resizeWidth: 0,
@@ -4935,7 +4935,7 @@ const setup = config;
 const globalStore = {};
 const VXETable = {
   v,
-  version: "4.6.5",
+  version: "4.6.6",
   config: config,
   globalStore,
   interceptor: interceptor,
@@ -7791,7 +7791,7 @@ function useSize(props) {
           'is--visible': props.modelValue
         }]
       }, slots.default ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-loading--warpper'
+        class: 'vxe-loading--wrapper'
       }, slots.default({}))] : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-loading--chunk'
       }, [loadingIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
@@ -8632,7 +8632,7 @@ const msgQueue = [];
       const rightVNs = [];
       if (cornerSlot) {
         rightVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
-          class: 'vxe-modal--corner-warpper'
+          class: 'vxe-modal--corner-wrapper'
         }, getSlotVNs(cornerSlot({
           $modal: $xemodal
         }))));
@@ -12916,7 +12916,7 @@ function getOptUniqueId() {
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(modal, {
         modelValue: storeData.visible,
         title: conf.i18n(isPrint ? 'vxe.export.printTitle' : 'vxe.export.expTitle'),
-        className: 'vxe-table-export-popup-warpper',
+        className: 'vxe-table-export-popup-wrapper',
         width: 660,
         mask: true,
         lockView: true,
@@ -13380,6 +13380,10 @@ function getOptUniqueId() {
       const propsOpts = computePropsOpts.value;
       return propsOpts.value || 'value';
     });
+    const computeDisabledField = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const propsOpts = computePropsOpts.value;
+      return propsOpts.disabled || 'disabled';
+    });
     let radioGroupMethods = {};
     useSize(props);
     const radioGroupPrivateMethods = {
@@ -13408,13 +13412,15 @@ function getOptUniqueId() {
       const defaultSlot = slots.default;
       const valueField = computeValueField.value;
       const labelField = computeLabelField.value;
+      const disabledField = computeDisabledField.value;
       const btnComp = type === 'button' ? radio_src_button : src_radio;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-radio-group'
       }, defaultSlot ? defaultSlot({}) : options ? options.map(item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(btnComp, {
           label: item[valueField],
-          content: item[labelField]
+          content: item[labelField],
+          disabled: item[disabledField]
         });
       }) : []);
     };
@@ -13539,7 +13545,7 @@ function getOptUniqueId() {
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(modal, {
         modelValue: storeData.visible,
         title: conf.i18n('vxe.import.impTitle'),
-        className: 'vxe-table-import-popup-warpper',
+        className: 'vxe-table-import-popup-wrapper',
         width: 440,
         mask: true,
         lockView: true,
@@ -16434,6 +16440,8 @@ const Validator = VxeTableValidatorModule;
 
 
 
+
+
 /* harmony default export */ var custom_src_panel = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
   name: 'VxeTableCustomPanel',
   props: {
@@ -16445,13 +16453,17 @@ const Validator = VxeTableValidatorModule;
   setup(props) {
     const $xetable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xetable', {});
     const {
-      internalData
+      reactData
     } = $xetable;
     const {
       computeCustomOpts,
       computeIsMaxFixedColumn
     } = $xetable.getComputeMaps();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const bodyElemRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const dragHintElemRef = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const dragColumn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    let prevDropTrEl;
     const handleWrapperMouseenterEvent = evnt => {
       const {
         customStore
@@ -16484,13 +16496,25 @@ const Validator = VxeTableValidatorModule;
       $xetable.emitCustomEvent('reset', evnt);
     };
     const resetPopupCustomEvent = evnt => {
-      resetCustomEvent(evnt);
+      if (VXETable.modal) {
+        VXETable.modal.confirm({
+          content: conf.i18n('vxe.custom.cstmConfirmRestore'),
+          className: 'vxe-table--ignore-clear',
+          escClosable: true
+        }).then(type => {
+          if (type === 'confirm') {
+            resetCustomEvent(evnt);
+          }
+        });
+      } else {
+        resetCustomEvent(evnt);
+      }
     };
     const handleOptionCheck = column => {
       const {
-        collectColumn
-      } = internalData;
-      const matchObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item === column);
+        customColumnList
+      } = reactData;
+      const matchObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(customColumnList, item => item === column);
       if (matchObj && matchObj.parent) {
         const {
           parent
@@ -16536,14 +16560,14 @@ const Validator = VxeTableValidatorModule;
         customStore
       } = props;
       const {
-        collectColumn
-      } = internalData;
+        customColumnList
+      } = reactData;
       const customOpts = computeCustomOpts.value;
       const {
         checkMethod
       } = customOpts;
       const isAll = !customStore.isAll;
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, column => {
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, column => {
         if (!checkMethod || checkMethod({
           column
         })) {
@@ -16554,13 +16578,117 @@ const Validator = VxeTableValidatorModule;
       customStore.isAll = isAll;
       $xetable.checkCustomStatus();
     };
+    const sortMousedownEvent = evnt => {
+      const btnEl = evnt.currentTarget;
+      const tdEl = btnEl.parentNode;
+      const trEl = tdEl.parentNode;
+      const colid = trEl.getAttribute('colid');
+      const column = $xetable.getColumnById(colid);
+      trEl.draggable = true;
+      dragColumn.value = column;
+      addClass(trEl, 'active--drag-origin');
+    };
+    const sortMouseupEvent = evnt => {
+      const btnEl = evnt.currentTarget;
+      const tdEl = btnEl.parentNode;
+      const trEl = tdEl.parentNode;
+      const dragHintEl = dragHintElemRef.value;
+      trEl.draggable = false;
+      dragColumn.value = null;
+      removeClass(trEl, 'active--drag-origin');
+      if (dragHintEl) {
+        dragHintEl.style.display = '';
+      }
+    };
+    const sortDragstartEvent = evnt => {
+      const img = new Image();
+      if (evnt.dataTransfer) {
+        evnt.dataTransfer.setDragImage(img, 0, 0);
+      }
+    };
+    const sortDragendEvent = evnt => {
+      const {
+        customColumnList
+      } = reactData;
+      const trEl = evnt.currentTarget;
+      const dragHintEl = dragHintElemRef.value;
+      if (prevDropTrEl) {
+        // 判断是否有拖动
+        if (prevDropTrEl !== trEl) {
+          const dragOffset = prevDropTrEl.getAttribute('drag-pos');
+          const colid = trEl.getAttribute('colid');
+          const column = $xetable.getColumnById(colid);
+          if (!column) {
+            return;
+          }
+          const cIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === column.id);
+          const targetColid = prevDropTrEl.getAttribute('colid');
+          const targetColumn = $xetable.getColumnById(targetColid);
+          if (!targetColumn) {
+            return;
+          }
+          // 移出源位置
+          customColumnList.splice(cIndex, 1);
+          const tcIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === targetColumn.id);
+          // 插新位置
+          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
+        }
+        prevDropTrEl.draggable = false;
+        prevDropTrEl.removeAttribute('drag-pos');
+        removeClass(prevDropTrEl, 'active--drag-target');
+      }
+      dragColumn.value = null;
+      trEl.draggable = false;
+      trEl.removeAttribute('drag-pos');
+      if (dragHintEl) {
+        dragHintEl.style.display = '';
+      }
+      removeClass(trEl, 'active--drag-target');
+      removeClass(trEl, 'active--drag-origin');
+      // 更新顺序
+      customColumnList.forEach((column, index) => {
+        column.renderSortNumber = index;
+      });
+    };
+    const sortDragoverEvent = evnt => {
+      const trEl = evnt.currentTarget;
+      if (prevDropTrEl !== trEl) {
+        removeClass(prevDropTrEl, 'active--drag-target');
+      }
+      const colid = trEl.getAttribute('colid');
+      const column = $xetable.getColumnById(colid);
+      // 是否移入有效元行
+      if (column && column.level === 1) {
+        evnt.preventDefault();
+        const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+        const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+        addClass(trEl, 'active--drag-target');
+        trEl.setAttribute('drag-pos', dragOffset);
+        prevDropTrEl = trEl;
+      }
+      updateDropHint(evnt);
+    };
+    const updateDropHint = evnt => {
+      const dragHintEl = dragHintElemRef.value;
+      const bodyEl = bodyElemRef.value;
+      if (!bodyEl) {
+        return;
+      }
+      if (dragHintEl) {
+        const warpperEl = bodyEl.parentNode;
+        const warpperRect = warpperEl.getBoundingClientRect();
+        dragHintEl.style.display = 'block';
+        dragHintEl.style.top = `${Math.min(warpperEl.clientHeight - warpperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - warpperRect.y)}px`;
+        dragHintEl.style.left = `${Math.min(warpperEl.clientWidth - warpperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - warpperRect.x)}px`;
+      }
+    };
     const renderSimplePanel = () => {
       const {
         customStore
       } = props;
       const {
-        collectColumn
-      } = internalData;
+        customColumnList
+      } = reactData;
       const customOpts = computeCustomOpts.value;
       const {
         maxHeight
@@ -16578,7 +16706,7 @@ const Validator = VxeTableValidatorModule;
         customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
         customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
       }
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parent) => {
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({
           column
         }) : true;
@@ -16678,8 +16806,8 @@ const Validator = VxeTableValidatorModule;
         customStore
       } = props;
       const {
-        collectColumn
-      } = internalData;
+        customColumnList
+      } = reactData;
       const customOpts = computeCustomOpts.value;
       const {
         checkMethod,
@@ -16687,7 +16815,7 @@ const Validator = VxeTableValidatorModule;
       } = customOpts;
       const isMaxFixedColumn = computeIsMaxFixedColumn.value;
       const trVNs = [];
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parent) => {
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({
           column
         }) : true;
@@ -16701,16 +16829,28 @@ const Validator = VxeTableValidatorModule;
           }) : false;
           trVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
             key: column.id,
-            class: [`vxe-table-custom-popup--row-level${column.level}`, {
+            colid: column.id,
+            class: [`vxe-table-custom-popup--row level--${column.level}`, {
               'is--group': isColGroup
-            }]
+            }],
+            onDragstart: sortDragstartEvent,
+            onDragend: sortDragendEvent,
+            onDragover: sortDragoverEvent
           }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-            class: 'vxe-table-custom-popup--column-name'
+            class: 'vxe-table-custom-popup--column-item col--sort'
+          }, [column.level === 1 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+            class: 'vxe-table-custom-popup--column-sort-btn',
+            onMousedown: sortMousedownEvent,
+            onMouseup: sortMouseupEvent
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+            class: 'vxe-icon-sort'
+          })]) : null]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
+            class: 'vxe-table-custom-popup--column-item col--name'
           }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             class: 'vxe-table-custom-popup--name',
             title: colTitle
           }, colTitle)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-            class: 'vxe-table-custom-popup--column-visiblw'
+            class: 'vxe-table-custom-popup--column-item col--visible'
           }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
             class: ['vxe-table-custom--checkbox-option', {
               'is--checked': isChecked,
@@ -16725,21 +16865,22 @@ const Validator = VxeTableValidatorModule;
           }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
             class: ['vxe-checkbox--icon', isIndeterminate ? conf.icon.TABLE_CHECKBOX_INDETERMINATE : isChecked ? conf.icon.TABLE_CHECKBOX_CHECKED : conf.icon.TABLE_CHECKBOX_UNCHECKED]
           })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-            class: 'vxe-table-custom-popup--column-fixed'
+            class: 'vxe-table-custom-popup--column-item col--fixed'
           }, [!parent && customOpts.allowFixed ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(group, {
             modelValue: column.fixed || '',
-            disabled: isMaxFixedColumn,
             type: 'button',
             size: 'mini',
             options: [{
-              label: '左侧',
-              value: 'left'
+              label: conf.i18n('vxe.custom.setting.fixedLeft'),
+              value: 'left',
+              disabled: isMaxFixedColumn
             }, {
-              label: '不固定',
+              label: conf.i18n('vxe.custom.setting.fixedUnset'),
               value: ''
             }, {
-              label: '右侧',
-              value: 'right'
+              label: conf.i18n('vxe.custom.setting.fixedRight'),
+              value: 'right',
+              disabled: isMaxFixedColumn
             }],
             'onUpdate:modelValue'(value) {
               column.fixed = value;
@@ -16752,23 +16893,34 @@ const Validator = VxeTableValidatorModule;
       });
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(modal, {
         key: 'popup',
-        className: 'vxe-table-custom-popup-warpper vxe-table--ignore-clear',
+        className: 'vxe-table-custom-popup-wrapper vxe-table--ignore-clear',
         modelValue: customStore.visible,
         title: conf.i18n('vxe.custom.cstmTitle'),
-        width: 700,
-        maxHeight: 500,
+        width: '40vw',
+        minWidth: 500,
+        height: '50vh',
+        minHeight: 300,
         mask: true,
         lockView: true,
         showFooter: true,
+        resize: true,
         escClosable: true,
+        destroyOnClose: true,
         'onUpdate:modelValue'(value) {
           customStore.visible = value;
         }
       }, {
         default: () => {
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            ref: bodyElemRef,
             class: 'vxe-table-custom-popup--body'
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('colgroup', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-table-custom-popup--table-wrapper'
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('table', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('colgroup', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {
+            style: {
+              width: '60px'
+            }
+          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {
             style: {
               width: '80px'
             }
@@ -16776,7 +16928,16 @@ const Validator = VxeTableValidatorModule;
             style: {
               width: '200px'
             }
-          })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, '标题'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, '是否显示'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, '是否固定')])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tbody', {}, trVNs)])]);
+          })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colSort')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colVisible')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {}, conf.i18n('vxe.custom.setting.colFixed'))])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
+            class: 'vxe-table-custom--body',
+            tag: 'tbody',
+            name: 'vxe-table-custom--flip'
+          }, {
+            default: () => trVNs
+          })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            ref: dragHintElemRef,
+            class: 'vxe-table-custom-popup--drag-hint'
+          }, conf.i18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))]);
         },
         footer: () => {
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -16850,6 +17011,7 @@ const customHook = {
       } = reactData;
       customStore.visible = true;
       initStore.custom = true;
+      reactData.customColumnList = internalData.collectColumn.slice(0);
       checkCustomStatus();
       calcMaxHeight();
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => calcMaxHeight());
@@ -21106,6 +21268,10 @@ dynamicApp.component(src_checkbox.name, src_checkbox);
       const propsOpts = computePropsOpts.value;
       return propsOpts.value || 'value';
     });
+    const computeDisabledField = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const propsOpts = computePropsOpts.value;
+      return propsOpts.disabled || 'disabled';
+    });
     const computeMaps = {
       computeIsMaximize
     };
@@ -21157,12 +21323,14 @@ dynamicApp.component(src_checkbox.name, src_checkbox);
       const defaultSlot = slots.default;
       const valueField = computeValueField.value;
       const labelField = computeLabelField.value;
+      const disabledField = computeDisabledField.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-checkbox-group'
       }, defaultSlot ? defaultSlot({}) : options ? options.map(item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_checkbox, {
           label: item[valueField],
-          content: item[labelField]
+          content: item[labelField],
+          disabled: item[disabledField]
         });
       }) : []);
     };
@@ -26629,7 +26797,7 @@ const isWebkit = browse['-webkit'] && !browse.edge;
 const resizableStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_WIDTH';
 const visibleStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_VISIBLE';
 const fixedStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_FIXED';
-const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
+const sortStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_SORT';
 /* harmony default export */ var table = ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.defineComponent)({
   name: 'VxeTable',
   props: props,
@@ -26731,6 +26899,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
         visible: false,
         maxHeight: 0
       },
+      customColumnList: [],
       // 当前选中的筛选列
       filterStore: {
         isAllSelected: false,
@@ -27092,10 +27261,11 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
     });
     const computeFixedColumnSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
-        tableFullColumn
+        collectColumn
       } = internalData;
       let fixedSize = 0;
-      tableFullColumn.forEach(column => {
+      // 只判断第一层
+      collectColumn.forEach(column => {
         if (column.fixed) {
           fixedSize++;
         }
@@ -27502,11 +27672,13 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
       const {
         storage
       } = customOpts;
-      const isCustomResizable = storage === true || storage && storage.resizable;
-      const isCustomVisible = storage === true || storage && storage.visible;
-      const isCustomFixed = storage === true || storage && storage.fixed;
-      const isCustomOrder = storage === true || storage && storage.order;
-      if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomOrder)) {
+      const isAllCustom = storage === true;
+      const storageOpts = isAllCustom ? {} : Object.assign({}, storage || {});
+      const isCustomResizable = isAllCustom || storageOpts.resizable;
+      const isCustomVisible = isAllCustom || storageOpts.visible;
+      const isCustomFixed = isAllCustom || storageOpts.fixed;
+      const isCustomSort = isAllCustom || storageOpts.sort;
+      if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
         const customMap = {};
         if (!id) {
           errLog('vxe.error.reqProp', ['id']);
@@ -27541,18 +27713,20 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
           }
         }
         // 自定义顺序
-        if (isCustomOrder) {
-          const columnOrderStorage = getCustomStorageMap(orderStorageKey)[id];
-          if (columnOrderStorage) {
-            // const colOrderSeqs = columnOrderStorage.split(',')
-            // colOrderSeqs.forEach((orderConf: any) => {
-            //   const [colKey, order] = orderConf.split('|')
-            //   if (customMap[colKey]) {
-            //     customMap[colKey].order = order
-            //   } else {
-            //     customMap[colKey] = { order }
-            //   }
-            // })
+        if (isCustomSort) {
+          const columnSortStorage = getCustomStorageMap(sortStorageKey)[id];
+          if (columnSortStorage) {
+            const colOrderSeqs = columnSortStorage.split(',');
+            colOrderSeqs.forEach(orderConf => {
+              const [colKey, sortNumber] = orderConf.split('|');
+              if (customMap[colKey]) {
+                customMap[colKey].sortNumber = sortNumber;
+              } else {
+                customMap[colKey] = {
+                  sortNumber
+                };
+              }
+            });
           }
         }
         // 自定义隐藏列
@@ -27593,7 +27767,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
           visible,
           resizeWidth,
           fixed,
-          order
+          sortNumber
         }, colKey) => {
           const column = keyMap[colKey];
           if (column) {
@@ -27606,8 +27780,8 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
             if (fixed) {
               column.fixed = fixed;
             }
-            if (order) {
-              column.customOrder = order;
+            if (sortNumber) {
+              column.renderSortNumber = Number(sortNumber);
             }
           }
         });
@@ -27617,7 +27791,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
      * 更新数据列的 Map
      * 牺牲数据组装的耗时，用来换取使用过程中的流畅
      */
-    const cacheColumnMap = () => {
+    const cacheColumnMap = isInit => {
       const {
         tableFullColumn,
         collectColumn
@@ -27706,6 +27880,9 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
         if (fullColumnIdData[colid]) {
           errLog('vxe.error.colRepet', ['colId', colid]);
         }
+        if (isInit) {
+          column.sortNumber = index;
+        }
         fullColumnIdData[colid] = rest;
       };
       if (isGroup) {
@@ -28081,7 +28258,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
               column,
               field,
               property: field,
-              order,
+              order: order,
               sortTime: column.sortTime
             });
           }
@@ -29468,7 +29645,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
       internalData.collectColumn = collectColumn;
       const tableFullColumn = getColumnList(collectColumn);
       internalData.tableFullColumn = tableFullColumn;
-      cacheColumnMap();
+      cacheColumnMap(true);
       restoreCustomStorage();
       parseColumns().then(() => {
         if (reactData.scrollXLoad) {
@@ -30157,7 +30334,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
        */
       getColumnById(colid) {
         const fullColumnIdData = internalData.fullColumnIdData;
-        return fullColumnIdData[colid] ? fullColumnIdData[colid].column : null;
+        return colid && fullColumnIdData[colid] ? fullColumnIdData[colid].column : null;
       },
       /**
        * 根据列的字段名获取列
@@ -30165,7 +30342,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
        */
       getColumnByField(field) {
         const fullColumnFieldData = internalData.fullColumnFieldData;
-        return fullColumnFieldData[field] ? fullColumnFieldData[field].column : null;
+        return field && fullColumnFieldData[field] ? fullColumnFieldData[field].column : null;
       },
       /**
        * 获取当前表格的列
@@ -30265,7 +30442,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
         const {
           fullDataRowIdData
         } = internalData;
-        const rowid = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(cellValue) ? '' : encodeURIComponent(cellValue);
+        const rowid = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(cellValue) ? '' : encodeURIComponent(cellValue || '');
         return fullDataRowIdData[rowid] ? fullDataRowIdData[rowid].row : null;
       },
       /**
@@ -30402,7 +30579,8 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
         const opts = Object.assign({
           visible: true,
           resizable: options === true,
-          fixed: options === true
+          fixed: options === true,
+          sort: options === true
         }, options);
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, column => {
           if (opts.resizable) {
@@ -30411,6 +30589,9 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
           if (opts.fixed) {
             column.fixed = column.defaultFixed;
           }
+          if (opts.sort) {
+            column.renderSortNumber = column.sortNumber;
+          }
           if (!checkMethod || checkMethod({
             column
           })) {
@@ -30428,8 +30609,16 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
       /**
        * 刷新列信息
        * 将固定的列左边、右边分别靠边
+       * 如果传 true 则会检查列顺序并排序
        */
-      refreshColumn() {
+      refreshColumn(resiveOrder) {
+        if (resiveOrder) {
+          const columnList = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().orderBy(internalData.collectColumn, 'renderSortNumber');
+          internalData.collectColumn = columnList;
+          const tableFullColumn = getColumnList(columnList);
+          internalData.tableFullColumn = tableFullColumn;
+          cacheColumnMap();
+        }
         return parseColumns().then(() => {
           return tableMethods.refreshScroll();
         }).then(() => {
@@ -31029,7 +31218,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
               column,
               field,
               property: field,
-              order,
+              order: order,
               sortTime: column.sortTime
             });
           }
@@ -32688,7 +32877,9 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
         const {
           storage
         } = customOpts;
-        const isCustomFixed = storage === true || storage && storage.fixed;
+        const isAllStorage = storage === true;
+        const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {});
+        const isCustomFixed = isAllStorage || storageOpts.fixed;
         if (customConfig && isCustomFixed) {
           const columnFixedStorageMap = getCustomStorageMap(fixedStorageKey);
           const colFixeds = [];
@@ -32721,7 +32912,9 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
           checkMethod,
           storage
         } = customOpts;
-        const isCustomVisible = storage === true || storage && storage.visible;
+        const isAllStorage = storage === true;
+        const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {});
+        const isCustomVisible = isAllStorage || storageOpts.visible;
         if (customConfig && isCustomVisible) {
           const columnVisibleStorageMap = getCustomStorageMap(visibleStorageKey);
           const colHides = [];
@@ -32754,7 +32947,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
       handleCustom() {
         tablePrivateMethods.saveCustomVisible();
         tablePrivateMethods.analyColumnWidth();
-        return tableMethods.refreshColumn();
+        return tableMethods.refreshColumn(true);
       },
       handleUpdateDataQueue() {
         reactData.upDataFlag++;
@@ -34383,7 +34576,7 @@ const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER';
         ref: refElem,
         class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
           [`size--${vSize}`]: vSize,
-          [`vaild-msg--${validOpts.msgMode}`]: !!editRules,
+          [`valid-msg--${validOpts.msgMode}`]: !!editRules,
           'vxe-editable': !!editConfig,
           'old-cell-valid': editRules && conf.cellVaildMode === 'obsolete',
           'cell--highlight': highlightCell,
@@ -34584,7 +34777,7 @@ dynamicApp.component(table.name, table);
       text: '加载中...'
     },
     error: {
-      groupFixed: '如果使用分组表头，固定列必须按组设置',
+      groupFixed: '如果使用分组表头，冻结列必须按组设置',
       groupMouseRange: '分组表头与 "{0}" 不能同时使用，这可能会出现错误',
       groupTag: '分组列头应该使用 "{0}" 而不是 "{1}"，这可能会出现错误',
       scrollErrProp: '启用虚拟滚动后不支持该参数 "{0}"',
@@ -34637,7 +34830,7 @@ dynamicApp.component(table.name, table);
       customAll: '全部',
       customConfirm: '确认',
       customRestore: '重置',
-      maxFixedCol: '最大固定列的数量不能超过 {0} 个'
+      maxFixedCol: '最大冻结列的数量不能超过 {0} 个'
     },
     grid: {
       selectOneRecord: '请至少选择一条记录！',
@@ -34672,7 +34865,7 @@ dynamicApp.component(table.name, table);
       endPageTitle: '末页'
     },
     alert: {
-      title: '消息提示'
+      title: '系统提示'
     },
     button: {
       confirm: '确认',
@@ -34685,7 +34878,18 @@ dynamicApp.component(table.name, table);
       cstmTitle: '列设置',
       cstmRestore: '恢复默认',
       cstmCancel: '取消',
-      cstmConfirm: '确定'
+      cstmConfirm: '确定',
+      cstmConfirmRestore: '请确认是否恢复成默认列配置？',
+      cstmDragTarget: '移动目标：{0}',
+      setting: {
+        colSort: '排序',
+        colTitle: '标题',
+        colVisible: '是否显示',
+        colFixed: '冻结列',
+        fixedLeft: '左侧',
+        fixedUnset: '不设置',
+        fixedRight: '右侧'
+      }
     },
     import: {
       modes: {
@@ -34764,9 +34968,9 @@ dynamicApp.component(table.name, table);
       customAll: '全部',
       customConfirm: '确认',
       customRestore: '重置',
-      fixedLeft: '固定在左侧',
-      fixedRight: '固定在右侧',
-      cancelfixed: '取消固定'
+      fixedLeft: '冻结在左侧',
+      fixedRight: '冻结在右侧',
+      cancelfixed: '取消冻结列'
     },
     input: {
       date: {