vxe-table 4.7.4 → 4.7.5

package/packages/table/src/table.ts

@@ -125,7 +125,10 @@ export default defineComponent({
         activeBtn: false,
         activeWrapper: false,
         visible: false,
-        maxHeight: 0
+        maxHeight: 0,
+        oldSortMaps: {},
+        oldFixedMaps: {},
+        oldVisibleMaps: {}
       },
       customColumnList: [],
       // 当前选中的筛选列
@@ -887,13 +890,16 @@ export default defineComponent({
     const restoreCustomStorage = () => {
       const { id, customConfig } = props
       const customOpts = computeCustomOpts.value
-      const { storage } = customOpts
+      const { storage, restoreStore } = customOpts
       const isAllCustom = storage === true
       const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = 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 (storage && id && restoreStore) {
+        restoreStore({ id })
+      }
       if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
         const customMap: {
           [key: string]: {

package/packages/toolbar/src/toolbar.ts

@@ -129,7 +129,7 @@ export default defineComponent({
       customStore.activeBtn = false
       setTimeout(() => {
         if (!customStore.activeBtn && !customStore.activeWrapper) {
-          $xeTable.customColseEvent($event)
+          $xeTable.customCloseEvent($event)
         }
       }, 350)
     }

package/packages/ui/index.ts

@@ -59,6 +59,7 @@ VxeUI.setConfig({
     // },
     customConfig: {
       allowFixed: true,
+      allowSort: true,
       showFooter: true
       //  storage: false,
       //  checkMethod () {}
@@ -218,6 +219,7 @@ VxeUI.setIcon({
   TABLE_CHECKBOX_INDETERMINATE: iconPrefix + 'checkbox-indeterminate-fill',
   TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked-fill',
   TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
+  TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
 
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',

package/styles/components/table-module/custom.scss

@@ -1,8 +1,52 @@
 @import '../../helpers/mixin.scss';
 
 .vxe-table-custom--option {
+  position: relative;
   display: flex;
   flex-direction: row;
+  &.active--drag-target {
+    &[drag-pos="top"] {
+      &::after {
+        display: block;
+        top: -2px;
+      }
+    }
+    &[drag-pos="bottom"] {
+      &::after {
+        display: block;
+        bottom: -2px;
+      }
+    }
+  }
+  &:first-child {
+    &[drag-pos="top"] {
+      &::after {
+        top: 0;
+      }
+    }
+  }
+  &:last-child {
+    &[drag-pos="bottom"] {
+      &::after {
+        bottom: 0;
+      }
+    }
+  }
+  &::after {
+    display: none;
+    content: "";
+    position: absolute;
+    left: -1px;
+    width: calc(100% + 1px);
+    height: 3px;
+    background-color: var(--vxe-ui-font-primary-color);
+    z-index: 12;
+  }
+  &:last-child {
+    &::after {
+      width: 100%;
+    }
+  }
 }
 
 .vxe-table-custom-wrapper {
@@ -21,6 +65,10 @@
   }
 }
 
+.vxe-table-custom--list-wrapper {
+  display: block;
+}
+
 .vxe-table-custom--header,
 .vxe-table-custom--body {
   list-style-type: none;
@@ -30,8 +78,8 @@
   padding: 0;
   user-select: none;
   & > li {
-    max-width: 18em;
-    min-width: 14em;
+    max-width: 26em;
+    min-width: 17em;
     padding: 0.2em 1em 0.2em 1em;
     @for $i from 2 through 8 {
       $interval: $i - 1 + 0.2;
@@ -62,12 +110,14 @@
 }
 
 .vxe-table-custom--footer {
+  display: flex;
+  flex-direction: row;
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);
   text-align: right;
   button {
     background-color: transparent;
     width: 50%;
-    height: 2.5em;
+    height: 2.8em;
     border: 0;
     color: var(--vxe-ui-font-color);
     text-align: center;
@@ -83,10 +133,31 @@
 
 .vxe-table-custom--checkbox-option {
   @include createCheckboxIcon();
+}
+.vxe-table-custom--checkbox-option,
+.vxe-table-custom--sort-option {
+  padding-right: 0.4em;
+  flex-shrink: 0;
+}
+.vxe-table-custom--sort-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.vxe-table-custom--sort-btn {
+  padding-left: 0.1em;
+  padding-right: 0.3em;
+  cursor: grabbing;
+  &:hover {
+    color: var(--vxe-ui-font-primary-color);
+  }
+}
+.vxe-table-custom--checkbox-label  {
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex-grow: 1;
 }
 
 .vxe-table-custom--fixed-option {
@@ -271,6 +342,9 @@
   font-size: 1.2em;
   padding: 0.2em 0.5em;
   cursor: grab;
+  &:hover {
+    color: var(--vxe-ui-font-primary-color);
+  }
   &:active {
     cursor: grabbing;
   }