releases 4.7.73

x-extends · Aug 29, 2024 · eeb5ba3 · eeb5ba3
1 parent 5ef97a6
commit eeb5ba3
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.7.72",
+  "version": "4.7.73",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.1.9"
+    "vxe-pc-ui": "^4.1.11"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

diff --git a/packages/table/module/custom/panel.ts b/packages/table/module/custom/panel.ts
@@ -369,6 +369,7 @@ export default defineComponent({
           const isColGroup = column.children && column.children.length
           const colTitle = formatText(column.getTitle(), 1)
           const isDisabled = checkMethod ? !checkMethod({ column }) : false
+          const isHidden = !isChecked
           colVNs.push(
             h('li', {
               key: column.id,
@@ -404,10 +405,16 @@ export default defineComponent({
                   class: 'vxe-table-custom--sort-option'
                 }, [
                   h('span', {
-                    class: 'vxe-table-custom--sort-btn',
+                    class: ['vxe-table-custom--sort-btn', {
+                      'is--disabled': isHidden
+                    }],
                     title: getI18n('vxe.custom.setting.sortHelpTip'),
-                    onMousedown: sortMousedownEvent,
-                    onMouseup: sortMouseupEvent
+                    ...(isHidden
+                      ? {}
+                      : {
+                          onMousedown: sortMousedownEvent,
+                          onMouseup: sortMouseupEvent
+                        })
                   }, [
                     h('i', {
                       class: getIcon().TABLE_CUSTOM_SORT
@@ -429,26 +436,30 @@ export default defineComponent({
                 ? h('div', {
                   class: 'vxe-table-custom--fixed-option'
                 }, [
-                  h('span', {
-                    class: ['vxe-table-custom--fixed-left-option', column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT, {
-                      'is--checked': column.renderFixed === 'left',
-                      'is--disabled': isMaxFixedColumn && !column.renderFixed
-                    }],
-                    title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
-                    onClick: () => {
-                      changeFixedOption(column, 'left')
-                    }
-                  }),
-                  h('span', {
-                    class: ['vxe-table-custom--fixed-right-option', column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT, {
-                      'is--checked': column.renderFixed === 'right',
-                      'is--disabled': isMaxFixedColumn && !column.renderFixed
-                    }],
-                    title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
-                    onClick: () => {
-                      changeFixedOption(column, 'right')
-                    }
-                  })
+                  VxeUIButtonComponent
+                    ? h(VxeUIButtonComponent, {
+                      mode: 'text',
+                      icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
+                      status: column.renderFixed === 'left' ? 'primary' : '',
+                      disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
+                      title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
+                      onClick: () => {
+                        changeFixedOption(column, 'left')
+                      }
+                    })
+                    : createCommentVNode(),
+                  VxeUIButtonComponent
+                    ? h(VxeUIButtonComponent, {
+                      mode: 'text',
+                      icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
+                      status: column.renderFixed === 'right' ? 'primary' : '',
+                      disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
+                      title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
+                      onClick: () => {
+                        changeFixedOption(column, 'right')
+                      }
+                    })
+                    : createCommentVNode()
                 ])
                 : createCommentVNode()
             ])
@@ -519,30 +530,38 @@ export default defineComponent({
               ? h('div', {
                 class: 'vxe-table-custom--footer'
               }, [
-                h(VxeUIButtonComponent, {
-                  mode: 'text',
-                  content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
-                  onClick: resetCustomEvent
-                }),
-                customOpts.immediate
+                VxeUIButtonComponent
                   ? h(VxeUIButtonComponent, {
                     mode: 'text',
-                    content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
-                    onClick: cancelCloseEvent
+                    content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
+                    onClick: resetCustomEvent
                   })
-                  : h(VxeUIButtonComponent, {
-                    mode: 'text',
-                    content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
-                    onClick: cancelCustomEvent
-                  }),
+                  : createCommentVNode(),
+                customOpts.immediate
+                  ? (VxeUIButtonComponent
+                      ? h(VxeUIButtonComponent, {
+                        mode: 'text',
+                        content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
+                        onClick: cancelCloseEvent
+                      })
+                      : createCommentVNode())
+                  : (VxeUIButtonComponent
+                      ? h(VxeUIButtonComponent, {
+                        mode: 'text',
+                        content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
+                        onClick: cancelCustomEvent
+                      })
+                      : createCommentVNode()),
                 customOpts.immediate
                   ? createCommentVNode()
-                  : h(VxeUIButtonComponent, {
-                    mode: 'text',
-                    status: 'primary',
-                    content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
-                    onClick: confirmCustomEvent
-                  })
+                  : (VxeUIButtonComponent
+                      ? h(VxeUIButtonComponent, {
+                        mode: 'text',
+                        status: 'primary',
+                        content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
+                        onClick: confirmCustomEvent
+                      })
+                      : createCommentVNode())
               ])
               : null
           ]
@@ -569,6 +588,7 @@ export default defineComponent({
           const colTitle = formatText(column.getTitle(), 1)
           const isColGroup = column.children && column.children.length
           const isDisabled = checkMethod ? !checkMethod({ column }) : false
+          const isHidden = !isChecked
           trVNs.push(
             h('tr', {
               key: column.id,
@@ -609,10 +629,16 @@ export default defineComponent({
                 }, [
                   column.level === 1
                     ? h('span', {
-                      class: 'vxe-table-custom-popup--column-sort-btn',
+                      class: ['vxe-table-custom-popup--column-sort-btn', {
+                        'is--disabled': isHidden
+                      }],
                       title: getI18n('vxe.custom.setting.sortHelpTip'),
-                      onMousedown: sortMousedownEvent,
-                      onMouseup: sortMouseupEvent
+                      ...(isHidden
+                        ? {}
+                        : {
+                            onMousedown: sortMousedownEvent,
+                            onMouseup: sortMouseupEvent
+                          })
                     }, [
                       h('i', {
                         class: getIcon().TABLE_CUSTOM_SORT
@@ -640,12 +666,13 @@ export default defineComponent({
                 ? h('td', {
                   class: 'vxe-table-custom-popup--column-item col--resizable'
                 }, [
-                  !isChecked || (column.children && column.children.length)
+                  column.children && column.children.length
                     ? h('span', '-')
                     : (
                         VxeUIInputComponent
                           ? h(VxeUIInputComponent, {
                             type: 'integer',
+                            disabled: isHidden,
                             modelValue: column.renderResizeWidth,
                             'onUpdate:modelValue' (value: any) {
                               column.renderResizeWidth = Math.max(0, Number(value))
@@ -667,10 +694,11 @@ export default defineComponent({
                             modelValue: column.renderFixed || '',
                             type: 'button',
                             size: 'mini',
+                            disabled: isHidden,
                             options: [
-                              { label: getI18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
-                              { label: getI18n('vxe.custom.setting.fixedUnset'), value: '' },
-                              { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
+                              { label: getI18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isHidden || isMaxFixedColumn },
+                              { label: getI18n('vxe.custom.setting.fixedUnset'), value: '', disabled: isHidden },
+                              { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isHidden || isMaxFixedColumn }
                             ],
                             'onUpdate:modelValue' (value: any) {
                               column.renderFixed = value

diff --git a/styles/components/table-module/custom.scss b/styles/components/table-module/custom.scss
@@ -165,9 +165,15 @@
 .vxe-table-custom--sort-btn {
   padding-left: 0.2em;
   padding-right: 0.4em;
-  cursor: grabbing;
-  &:hover {
-    color: var(--vxe-ui-font-primary-color);
+  &:not(.is--disabled) {
+    cursor: grabbing;
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+    }
+  }
+  &.is--disabled {
+    color: var(--vxe-ui-input-disabled-color);
+    cursor: not-allowed;
   }
 }
 .vxe-table-custom--checkbox-label  {
@@ -186,22 +192,6 @@
   user-select: none;
 }
 
-.vxe-table-custom--fixed-left-option,
-.vxe-table-custom--fixed-right-option {
-  line-height: 1.34em;
-  font-size: 1.1em;
-  padding: 0 0.2em;
-  cursor: pointer;
-  &.is--checked,
-  &:hover {
-    color: var(--vxe-ui-font-primary-color);
-  }
-  &.is--disabled {
-    cursor: no-drop;
-    color: var(--vxe-ui-input-disabled-color);
-  }
-}
-
 .vxe-table-custom-popup--body {
   overflow: auto;
   height: 100%;
@@ -366,12 +356,18 @@
 .vxe-table-custom-popup--column-sort-btn {
   font-size: 1.2em;
   padding: 0.2em 0.5em;
-  cursor: grab;
-  &:hover {
-    color: var(--vxe-ui-font-primary-color);
+  &:not(.is--disabled) {
+    cursor: grab;
+    &:hover {
+      color: var(--vxe-ui-font-primary-color);
+    }
+    &:active {
+      cursor: grabbing;
+    }
   }
-  &:active {
-    cursor: grabbing;
+  &.is--disabled {
+    color: var(--vxe-ui-input-disabled-color);
+    cursor: not-allowed;
   }
 }