diff --git a/package.json b/package.json index 2a6855ad44..2ad89fe0be 100644 --- 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 index 747dcb0809..cf740be080 100644 --- 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 index f2b798664c..ba788fadd6 100644 --- 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; } }