This commit is contained in:
sexygoat
2026-04-23 16:03:54 +08:00
parent 8ca03ed7ac
commit 8cc86369a2
2 changed files with 21 additions and 15 deletions

View File

@@ -164,6 +164,8 @@
actions?: ((row: any) => TableAction[]) | null actions?: ((row: any) => TableAction[]) | null
/** 操作列宽度 */ /** 操作列宽度 */
actionsWidth?: number actionsWidth?: number
/** 直接显示的操作按钮数量默认2个 */
inlineActionsCount?: number
} }
const props = withDefaults(defineProps<TableProps>(), { const props = withDefaults(defineProps<TableProps>(), {
@@ -192,7 +194,8 @@
treeProps: undefined, treeProps: undefined,
defaultExpandAll: false, defaultExpandAll: false,
actions: null, actions: null,
actionsWidth: 140 actionsWidth: 140,
inlineActionsCount: 2
}) })
/* /*
@@ -371,8 +374,8 @@
) )
} }
// 如果操作数量 <= 3,直接显示所有按钮 // 如果操作数量 <= inlineActionsCount,直接显示所有按钮
if (actionList.length <= 3) { if (actionList.length <= props.inlineActionsCount) {
return h( return h(
'div', 'div',
{ style: 'display: flex; gap: 8px;' }, { style: 'display: flex; gap: 8px;' },
@@ -390,19 +393,21 @@
) )
} }
// 如果操作数量 > 3显示第一个 + 更多下拉菜单 // 如果操作数量 > inlineActionsCount显示前 inlineActionsCount 个 + 更多下拉菜单
const firstAction = actionList[0] const inlineActions = actionList.slice(0, props.inlineActionsCount)
const moreActions = actionList.slice(1) const moreActions = actionList.slice(props.inlineActionsCount)
return h('div', { style: 'display: flex; gap: 12px; align-items: center;' }, [ return h('div', { style: 'display: flex; gap: 12px; align-items: center;' }, [
h( ...inlineActions.map((action) =>
ElButton, h(
{ ElButton,
type: firstAction.type === 'danger' ? 'danger' : 'primary', {
link: true, type: action.type === 'danger' ? 'danger' : 'primary',
onClick: () => firstAction.handler(row) link: true,
}, onClick: () => action.handler(row)
() => firstAction.label },
() => action.label
)
), ),
h( h(
ElDropdown, ElDropdown,

View File

@@ -35,7 +35,8 @@
:total="pagination.total" :total="pagination.total"
:marginTop="10" :marginTop="10"
:actions="getActions" :actions="getActions"
:actionsWidth="250" :actionsWidth="230"
:inlineActionsCount="2"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
> >