diff --git a/src/components/ComDataTable/index.vue b/src/components/ComDataTable/index.vue index ef1315b..ad7f3c0 100644 --- a/src/components/ComDataTable/index.vue +++ b/src/components/ComDataTable/index.vue @@ -179,7 +179,7 @@ - + + 更多 + + + + + -
-
+ -->
@@ -411,6 +469,17 @@ const props = defineProps({ type: [String, Boolean], default: 'right', }, + + // 是否开启更多按钮 + showMoreAction: { + type: Boolean, + default: false, + }, + // 超过几个按钮时开启更多按钮 + moreActionCount: { + type: Number, + default: 2, + }, // 分页配置 pagination: { type: Object, @@ -502,12 +571,83 @@ const hasActions = computed(() => { // 可见的操作按钮(前3个) const visibleActions = computed(() => { - return props.actionColumns.slice(0, 2) + if (props.showMoreAction) { + return props.actionColumns.slice(0, props.moreActionCount) + } + return props.actionColumns + // return props.actionColumns.slice(0, 2) }) // 更多的操作按钮(超过3个的部分) const moreActions = computed(() => { - return props.actionColumns.slice(2) + if (props.showMoreAction) { + return props.actionColumns.slice(props.moreActionCount) + } + return [] +}) + +// 动态计算操作列宽度 +const dynamicActionWidth = computed(() => { + if (props.actionColumns.length === 0) { + return 120 // 默认最小宽度 + } + + // 计算单个按钮的宽度(包括文字、padding) + // link类型的按钮,中文字符约14px,英文字符约7px,加上左右padding约16px + const getButtonWidth = (label) => { + if (!label) return 50 // 最小按钮宽度 + // 计算文字宽度:中文字符按14px,英文字符按7px + let textWidth = 0 + for (let i = 0; i < label.length; i++) { + const char = label[i] + // 判断是否为中文字符(包括中文标点) + if (/[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char)) { + textWidth += 18 + } else { + textWidth += 7 + } + } + const padding = 4 // 左右padding + return Math.max(textWidth + padding) // 最小50px + } + + // 按钮之间的间距 + const buttonGap = 0 + // 列标题和单元格padding(减小两端padding) + const columnPadding = 0 + + if (props.showMoreAction) { + // 需要更多按钮时:显示 moreActionCount 个按钮 + 1个更多按钮 + const visibleCount = props.moreActionCount + const moreButtonLabel = '更多' + + let totalWidth = columnPadding + + // 计算可见按钮的宽度 + for (let i = 0; i < Math.min(visibleCount, props.actionColumns.length); i++) { + const action = props.actionColumns[i] + totalWidth += getButtonWidth(action.label) + buttonGap + } + + // 加上更多按钮的宽度 + totalWidth += getButtonWidth(moreButtonLabel) + + return Math.max(totalWidth, 120) // 最小宽度120px + } else { + // 不需要更多按钮时:显示所有按钮 + let totalWidth = columnPadding + + props.actionColumns.forEach((action) => { + totalWidth += getButtonWidth(action.label) + buttonGap + }) + + // 减去最后一个按钮的间距 + if (props.actionColumns.length > 0) { + totalWidth -= buttonGap + } + + return Math.max(totalWidth, 100) // 最小宽度100px + } }) // 初始化列配置 @@ -744,85 +884,35 @@ defineExpose({ /* 操作列按钮样式 */ :deep(.el-table__fixed-right) { box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1); -} -/* 操作列单元格样式 - 确保按钮水平对齐 */ -:deep(.el-table__body-wrapper .el-table__body tbody tr td.action-column .cell), -:deep(.el-table__fixed-right .el-table__fixed-body-wrapper tbody tr td.action-column .cell) { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: nowrap; - gap: 8px; - white-space: nowrap; -} - -.action-button-item { - flex-shrink: 0; - display: inline-flex; - align-items: center; -} - -.more-action-button { - :deep(.el-icon--right) { - margin-left: 4px; - font-size: 12px; - vertical-align: middle; + /* 减小fixed right操作列的水平padding */ + .el-table__cell:last-child { + .cell { + padding-left: 8px !important; + padding-right: 8px !important; + } } } -/* Popover 菜单样式 */ -.popover-menu-list { - padding: 0; - margin: 0; - list-style: none; +/* 减小非fixed操作列的水平padding(操作列通常是最后一列) */ +:deep(.el-table__body-wrapper), +:deep(.el-table__header-wrapper) { + .el-table__body, + .el-table__header { + .el-table__row { + .el-table__cell:last-child { + .cell { + padding-left: 8px !important; + padding-right: 8px !important; + } + } + } + } } -.popover-menu-item { - padding: 8px 20px; +.setting-icon { cursor: pointer; - font-size: 14px; - color: #606266; - transition: all 0.2s; - line-height: 1.5; - white-space: nowrap; - user-select: none; - - &:hover:not(.is-disabled) { - background-color: #ecf5ff; - color: #409eff; - } - - &:active:not(.is-disabled) { - background-color: #d9ecff; - } - - &.is-disabled { - color: #c0c4cc; - cursor: not-allowed; - opacity: 0.6; - } - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } -} - -:deep(.action-popover-menu) { - padding: 4px 0; - border-radius: 4px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - border: 1px solid #e4e7ed; - background-color: #fff; - min-width: 120px; -} - -:deep(.action-popover-menu .el-popover__title) { - display: none; + font-size: 16px; } .column-setting-container { @@ -895,4 +985,106 @@ defineExpose({ :deep(.sortable-chosen) { background-color: #e0f2fe !important; } + +.action-column-container { + display: flex; + align-items: center; + justify-content: space-around; + position: relative; + + .el-button { + margin-left: 0; + } + + /* 修复el-dropdown悬停时的边框问题 */ + :deep(.el-dropdown) { + display: inline-block; + + .el-button { + border: none !important; + outline: none !important; + box-shadow: none !important; + + &:hover, + &:focus, + &:active { + border: none !important; + outline: none !important; + box-shadow: none !important; + } + } + } +} + +/* 隐藏el-dropdown的popper定位参考线和边框 */ +:deep(.el-dropdown__popper) { + &::before, + &::after { + display: none !important; + content: none !important; + } + + .el-popper__arrow { + display: none !important; + + &::before, + &::after { + display: none !important; + content: none !important; + } + } +} + +/* 修复下拉菜单的边框 */ +:deep(.el-dropdown-menu) { + &::before, + &::after { + display: none !important; + content: none !important; + } +} + +/* 确保操作列中的下拉按钮没有额外的边框或伪元素 */ +.action-column-container :deep(.el-dropdown) { + position: relative; + + &::before, + &::after { + display: none !important; + content: none !important; + } + + .el-button { + position: relative; + border: none !important; + outline: none !important; + + &::before, + &::after { + display: none !important; + content: none !important; + } + + &:hover::before, + &:hover::after, + &:focus::before, + &:focus::after { + display: none !important; + content: none !important; + } + } +} + +/* 修复表格单元格hover时可能显示的边框 */ +:deep(.el-table__body-wrapper .el-table__row:hover) { + .el-table__cell:last-child { + .action-column-container { + &::before, + &::after { + display: none !important; + content: none !important; + } + } + } +} diff --git a/src/components/ComTable/index.vue b/src/components/ComTable/index.vue index 00d9798..2b1900c 100644 --- a/src/components/ComTable/index.vue +++ b/src/components/ComTable/index.vue @@ -24,6 +24,8 @@ :show-toolbar="showToolbar" :show-action="showAction" :action-columns="actionColumns" + :show-more-action="showMoreAction" + :more-action-count="moreActionCount" @selection-change="handleSelectionChange" @refresh="handleRefresh" @pagination-change="handlePaginationChange" @@ -117,6 +119,16 @@ const props = defineProps({ type: Function, default: null, }, + // 是否开启更多按钮 + showMoreAction: { + type: Boolean, + default: false, + }, + // 超过几个按钮时开启更多按钮 + moreActionCount: { + type: Number, + default: 2, + }, // 初始化默认查询参数 defaultQueryParams: { type: Object, diff --git a/src/views/sMsSendManage/loopSend/index.vue b/src/views/sMsSendManage/loopSend/index.vue index 85922b5..bb476f6 100644 --- a/src/views/sMsSendManage/loopSend/index.vue +++ b/src/views/sMsSendManage/loopSend/index.vue @@ -8,6 +8,8 @@ :load-data="listLoopSendAPI" :show-toolbar="true" :show-action="true" + :show-more-action="true" + :more-action-count="2" :action-columns="actionColumns" >