vxe-table 4.7.4 → 4.7.6

package/packages/table/module/export/hook.ts

@@ -1255,6 +1255,23 @@ hooks.add('tableExportModule', {
           }
         })
       },
+      getPrintHtml (options) {
+        const printOpts = computePrintOpts.value
+        const opts = Object.assign({
+          original: false
+          // beforePrintMethod
+        }, printOpts, options, {
+          type: 'html',
+          download: false,
+          remote: false,
+          print: true
+        })
+        return exportMethods.exportData(opts).then(({ content }) => {
+          return {
+            html: content
+          }
+        })
+      },
       openImport (options) {
         const { treeConfig, importConfig } = props
         const { initStore, importStore, importParams } = reactData

package/packages/table/src/columnInfo.ts

@@ -102,6 +102,7 @@ export class ColumnInfo {
       halfVisible: false,
       defaultVisible: visible,
       defaultFixed: _vm.fixed,
+
       checked: false,
       halfChecked: false,
       disabled: false,
@@ -120,6 +121,9 @@ export class ColumnInfo {
       sortNumber: 0, // 用于记录自定义列顺序
       renderSortNumber: 0, // 用于记录自定义列顺序
 
+      renderFixed: '',
+      renderVisible: false,
+
       renderWidth: 0,
       renderHeight: 0,
       resizeWidth: 0, // 手动调整

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]: {
@@ -5350,11 +5356,9 @@ export default defineComponent({
             columnWidthStorage = XEUtils.isPlainObject(columnSortStorageMap[id]) ? columnSortStorageMap[id] : {}
             // 排序只支持一级
             collectColumn.forEach((column) => {
-              if (column.sortNumber !== column.renderSortNumber) {
-                const colKey = column.getKey()
-                if (colKey) {
-                  columnWidthStorage[colKey] = column.renderSortNumber
-                }
+              const colKey = column.getKey()
+              if (colKey) {
+                columnWidthStorage[colKey] = column.renderSortNumber
               }
             })
           }

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,14 +1,58 @@
 @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 {
   display: none;
   position: absolute;
-  top: -4px;
+  top: 1px;
   right: 2px;
   text-align: left;
   background-color: var(--vxe-ui-layout-background-color);
@@ -21,6 +65,10 @@
   }
 }
 
+.vxe-table-custom--list-wrapper {
+  display: block;
+}
+
 .vxe-table-custom--header,
 .vxe-table-custom--body {
   list-style-type: none;
@@ -28,10 +76,9 @@
   overflow-y: auto;
   margin: 0;
   padding: 0;
-  user-select: none;
   & > li {
-    max-width: 18em;
-    min-width: 14em;
+    max-width: 26em;
+    min-width: 18em;
     padding: 0.2em 1em 0.2em 1em;
     @for $i from 2 through 8 {
       $interval: $i - 1 + 0.2;
@@ -49,6 +96,7 @@
   padding: 0.28em 0;
   font-weight: 700;
   border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
+  user-select: none;
 }
 
 .vxe-table-custom--body {
@@ -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,32 @@
 
 .vxe-table-custom--checkbox-option {
   @include createCheckboxIcon();
+}
+.vxe-table-custom--checkbox-option,
+.vxe-table-custom--sort-option {
+  padding-right: 0.4em;
+  flex-shrink: 0;
+  user-select: none;
+}
+.vxe-table-custom--sort-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.vxe-table-custom--sort-btn {
+  padding-left: 0.2em;
+  padding-right: 0.4em;
+  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 {
@@ -95,6 +167,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  user-select: none;
 }
 
 .vxe-table-custom--fixed-left-option,
@@ -271,6 +344,9 @@
   font-size: 1.2em;
   padding: 0.2em 0.5em;
   cursor: grab;
+  &:hover {
+    color: var(--vxe-ui-font-primary-color);
+  }
   &:active {
     cursor: grabbing;
   }