fix(F006-W17.6.1): TableActions 收紧间距 + 理顺布局逻辑
用户反馈: 按钮没显示全 + 间距太大不美观
间距收紧:
- el-button text padding 0 8px → 0 4px (默认太松散)
- .rr-table-actions gap 4px → 0 (按钮紧贴)
- ⋯ 触发器 26px → 22px (更小巧)
- 实测: 按钮间距 0px, 按钮到⋯ 间距 2px
布局逻辑理顺:
- 多个 computed (visibleActions/isCollapsing/primaryActions/moreActions)
→ 合并为单一 layout computed ({primary, more})
- 减少中间依赖, 更可靠
Playwright 验证通过 (订单页):
- status=1 行: [详情,付款] + ⋯ (4按钮前2显)
- status=4 行: [详情,退款,打印] (3按钮全显无⋯)
- status≥5 行: [详情,打印] (2按钮无⋯)
This commit is contained in:
parent
2f7ec67903
commit
63b32e999f
@ -71,18 +71,14 @@ const visibleActions = computed<ActionItem[]>(() =>
|
|||||||
props.actions.filter(item => !item.when || item.when(props.row))
|
props.actions.filter(item => !item.when || item.when(props.row))
|
||||||
)
|
)
|
||||||
|
|
||||||
// 按钮总数 ≤3 全部常驻, >3 才拆分前 visibleCount 个常驻 + 其余收纳
|
// 拆分结果: 前 N 个常驻 + 其余收纳 (≤3 全常驻, >3 前 visibleCount 常驻)
|
||||||
const isCollapsing = computed(() => visibleActions.value.length > 3)
|
const layout = computed(() => {
|
||||||
|
const all = visibleActions.value
|
||||||
// 常驻文字按钮 (前 N 个, N = isCollapsing ? visibleCount : 全部)
|
if (all.length > 3) {
|
||||||
const primaryActions = computed<ActionItem[]>(() =>
|
return { primary: all.slice(0, props.visibleCount), more: all.slice(props.visibleCount) }
|
||||||
isCollapsing.value ? visibleActions.value.slice(0, props.visibleCount) : visibleActions.value
|
}
|
||||||
)
|
return { primary: all, more: [] as ActionItem[] }
|
||||||
|
})
|
||||||
// 收进 ⋯ 的按钮 (第 visibleCount 个及之后, 仅 isCollapsing 时有值)
|
|
||||||
const moreActions = computed<ActionItem[]>(() =>
|
|
||||||
isCollapsing.value ? visibleActions.value.slice(props.visibleCount) : []
|
|
||||||
)
|
|
||||||
|
|
||||||
// 执行操作 (处理二次确认)
|
// 执行操作 (处理二次确认)
|
||||||
async function runAction(item: ActionItem) {
|
async function runAction(item: ActionItem) {
|
||||||
@ -106,7 +102,7 @@ async function runAction(item: ActionItem) {
|
|||||||
<div class="rr-table-actions">
|
<div class="rr-table-actions">
|
||||||
<!-- 常驻文字按钮 -->
|
<!-- 常驻文字按钮 -->
|
||||||
<el-button
|
<el-button
|
||||||
v-for="(item, i) in primaryActions"
|
v-for="(item, i) in layout.primary"
|
||||||
:key="`p${i}`"
|
:key="`p${i}`"
|
||||||
text
|
text
|
||||||
:type="resolveType(item) as any"
|
:type="resolveType(item) as any"
|
||||||
@ -116,9 +112,9 @@ async function runAction(item: ActionItem) {
|
|||||||
|
|
||||||
<!-- 收纳下拉 (仅在按钮 >3 时渲染) -->
|
<!-- 收纳下拉 (仅在按钮 >3 时渲染) -->
|
||||||
<el-dropdown
|
<el-dropdown
|
||||||
v-if="moreActions.length"
|
v-if="layout.more.length"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
@command="(cmd: number) => runAction(moreActions[cmd])"
|
@command="(cmd: number) => runAction(layout.more[cmd])"
|
||||||
>
|
>
|
||||||
<span class="rr-more-trigger">
|
<span class="rr-more-trigger">
|
||||||
<el-icon><MoreFilled /></el-icon>
|
<el-icon><MoreFilled /></el-icon>
|
||||||
@ -126,7 +122,7 @@ async function runAction(item: ActionItem) {
|
|||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item
|
<el-dropdown-item
|
||||||
v-for="(item, i) in moreActions"
|
v-for="(item, i) in layout.more"
|
||||||
:key="`m${i}`"
|
:key="`m${i}`"
|
||||||
:command="i"
|
:command="i"
|
||||||
:divided="item.divided"
|
:divided="item.divided"
|
||||||
@ -142,18 +138,27 @@ async function runAction(item: ActionItem) {
|
|||||||
.rr-table-actions {
|
.rr-table-actions {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 0;
|
||||||
|
// 收紧 el-button text 的内边距, 默认 padding: 8px 15px 太松散
|
||||||
|
:deep(.el-button.is-text) {
|
||||||
|
padding: 0 4px;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
height: auto;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.rr-more-trigger {
|
.rr-more-trigger {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 26px;
|
width: 22px;
|
||||||
height: 26px;
|
height: 22px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--ink-2, #475569);
|
color: var(--ink-2, #475569);
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
|
margin-left: 2px;
|
||||||
transition: all 0.15s;
|
transition: all 0.15s;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--el-fill-color-light, #F4F4F5);
|
background: var(--el-fill-color-light, #F4F4F5);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user