refactor(form): 调整 table-group-list 属性透传与切换按钮控制方式

- TableGroupList 新增 showIndex、sortKey、sort 属性透传至 Table
- 切换按钮显示改由 config.enableToggleMode 或组件 prop 控制,Table 不再内置 enableToggleMode
- GroupList 新增 showIndex 属性
- DisplayConds 关闭切换模式
- GroupListConfig.beforeAddRow 返回值去掉 Promise 支持

Made-with: Cursor
This commit is contained in:
roymondchen 2026-04-23 20:38:56 +08:00
parent 4cd54d1397
commit d7ad63d3a2
6 changed files with 17 additions and 5 deletions

View File

@ -67,6 +67,7 @@ const config = computed<GroupListConfig>(() => ({
name: props.name, name: props.name,
titlePrefix: props.config.titlePrefix, titlePrefix: props.config.titlePrefix,
expandAll: true, expandAll: true,
enableToggleMode: false,
items: [ items: [
{ {
type: 'table', type: 'table',

View File

@ -806,7 +806,7 @@ export interface GroupListConfig<T = never> extends FormItem {
}; };
/** 最大行数 */ /** 最大行数 */
max?: number; max?: number;
beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean | Promise<boolean>; beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean;
} }
interface StepItemConfig<T = never> extends FormItem, ContainerCommonConfig<T> { interface StepItemConfig<T = never> extends FormItem, ContainerCommonConfig<T> {

View File

@ -60,6 +60,7 @@ const props = defineProps<{
prop?: string; prop?: string;
size?: string; size?: string;
disabled?: boolean; disabled?: boolean;
showIndex?: boolean;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{

View File

@ -11,12 +11,20 @@
:last-values="lastValues" :last-values="lastValues"
:prop="prop" :prop="prop"
:label-width="labelWidth" :label-width="labelWidth"
:show-index="showIndex"
:sort-key="sortKey"
:sort="sort"
@change="onChange" @change="onChange"
@select="onSelect" @select="onSelect"
@addDiffCount="onAddDiffCount" @addDiffCount="onAddDiffCount"
> >
<template #toggle-button> <template #toggle-button>
<TMagicButton v-if="config.enableToggleMode !== false" :icon="Grid" size="small" @click="toggleDisplayMode"> <TMagicButton
v-if="config.enableToggleMode || enableToggleMode"
:icon="Grid"
size="small"
@click="toggleDisplayMode"
>
{{ displayMode === 'table' ? '展开配置' : '切换为表格' }} {{ displayMode === 'table' ? '展开配置' : '切换为表格' }}
</TMagicButton> </TMagicButton>
</template> </template>
@ -65,6 +73,10 @@ const props = defineProps<{
labelWidth?: string; labelWidth?: string;
disabled?: boolean; disabled?: boolean;
size?: string; size?: string;
enableToggleMode?: true;
showIndex?: boolean;
sortKey?: string;
sort?: boolean;
}>(); }>();
const emit = defineEmits(['change', 'select', 'addDiffCount']); const emit = defineEmits(['change', 'select', 'addDiffCount']);

View File

@ -34,7 +34,7 @@
<div style="display: flex; justify-content: space-between; margin: 10px 0"> <div style="display: flex; justify-content: space-between; margin: 10px 0">
<div style="display: flex"> <div style="display: flex">
<slot name="toggle-button" v-if="enableToggleMode && !isFullscreen"></slot> <slot name="toggle-button" v-if="!isFullscreen"></slot>
<TMagicButton <TMagicButton
:icon="FullScreen" :icon="FullScreen"
size="small" size="small"
@ -104,7 +104,6 @@ defineOptions({
const props = withDefaults(defineProps<TableProps>(), { const props = withDefaults(defineProps<TableProps>(), {
prop: '', prop: '',
sortKey: '', sortKey: '',
enableToggleMode: true,
showIndex: true, showIndex: true,
lastValues: () => ({}), lastValues: () => ({}),
isCompare: false, isCompare: false,

View File

@ -13,6 +13,5 @@ export interface TableProps {
sortKey?: string; sortKey?: string;
text?: string; text?: string;
size?: string; size?: string;
enableToggleMode?: boolean;
showIndex?: boolean; showIndex?: boolean;
} }