feat(form): add `alwaysShowLines` prop
允许设置Form折叠时始终保持显示状态的行数 close: #1051
This commit is contained in:
parent
61d853e6a5
commit
93f9a19aa1
|
|
@ -3,6 +3,7 @@
|
||||||
### ✨ Features
|
### ✨ Features
|
||||||
|
|
||||||
- **BasicTree** 添加搜索功能相关属性和方法
|
- **BasicTree** 添加搜索功能相关属性和方法
|
||||||
|
- **BasicForm** 新增`alwaysShowLines`用于设置折叠时保留显示的行数
|
||||||
|
|
||||||
### 🐛 Bug Fixes
|
### 🐛 Bug Fixes
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -103,7 +103,7 @@ export default function ({
|
||||||
}
|
}
|
||||||
return { isAdvanced: advanceState.isAdvanced, itemColSum };
|
return { isAdvanced: advanceState.isAdvanced, itemColSum };
|
||||||
}
|
}
|
||||||
if (itemColSum > BASIC_COL_LEN) {
|
if (itemColSum > BASIC_COL_LEN * (unref(getProps).alwaysShowLines || 1)) {
|
||||||
return { isAdvanced: advanceState.isAdvanced, itemColSum };
|
return { isAdvanced: advanceState.isAdvanced, itemColSum };
|
||||||
} else {
|
} else {
|
||||||
// The first line is always displayed
|
// The first line is always displayed
|
||||||
|
|
|
||||||
|
|
@ -59,6 +59,8 @@ export const basicProps = {
|
||||||
rulesMessageJoinLabel: propTypes.bool.def(true),
|
rulesMessageJoinLabel: propTypes.bool.def(true),
|
||||||
// 超过3行自动折叠
|
// 超过3行自动折叠
|
||||||
autoAdvancedLine: propTypes.number.def(3),
|
autoAdvancedLine: propTypes.number.def(3),
|
||||||
|
// 不受折叠影响的行数
|
||||||
|
alwaysShowLines: propTypes.number.def(1),
|
||||||
|
|
||||||
// 是否显示操作按钮
|
// 是否显示操作按钮
|
||||||
showActionButtonGroup: propTypes.bool.def(true),
|
showActionButtonGroup: propTypes.bool.def(true),
|
||||||
|
|
|
||||||
|
|
@ -97,6 +97,8 @@ export interface FormProps {
|
||||||
autoFocusFirstItem?: boolean;
|
autoFocusFirstItem?: boolean;
|
||||||
// Automatically collapse over the specified number of rows
|
// Automatically collapse over the specified number of rows
|
||||||
autoAdvancedLine?: number;
|
autoAdvancedLine?: number;
|
||||||
|
// Always show lines
|
||||||
|
alwaysShowLines?: number;
|
||||||
// Whether to show the operation button
|
// Whether to show the operation button
|
||||||
showActionButtonGroup?: boolean;
|
showActionButtonGroup?: boolean;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<BasicForm @register="register" />
|
<BasicForm @register="register" />
|
||||||
</CollapseContainer>
|
</CollapseContainer>
|
||||||
|
|
||||||
<CollapseContainer title="超过3行自动收起" class="mt-4">
|
<CollapseContainer title="超过3行自动收起,折叠时保留2行" class="mt-4">
|
||||||
<BasicForm @register="register1" />
|
<BasicForm @register="register1" />
|
||||||
</CollapseContainer>
|
</CollapseContainer>
|
||||||
</PageWrapper>
|
</PageWrapper>
|
||||||
|
|
@ -160,14 +160,26 @@
|
||||||
compact: true,
|
compact: true,
|
||||||
showAdvancedButton: true,
|
showAdvancedButton: true,
|
||||||
});
|
});
|
||||||
|
const extraSchemas: FormSchema[] = [];
|
||||||
|
for (let i = 14; i < 30; i++) {
|
||||||
|
extraSchemas.push({
|
||||||
|
field: 'field' + i,
|
||||||
|
component: 'Input',
|
||||||
|
label: '字段' + i,
|
||||||
|
colProps: {
|
||||||
|
span: 8,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
const [register1] = useForm({
|
const [register1] = useForm({
|
||||||
labelWidth: 120,
|
labelWidth: 120,
|
||||||
schemas: [...getSchamas(), ...getAppendSchemas()],
|
schemas: [...getSchamas(), ...getAppendSchemas(), ...extraSchemas],
|
||||||
actionColOptions: {
|
actionColOptions: {
|
||||||
span: 24,
|
span: 24,
|
||||||
},
|
},
|
||||||
compact: true,
|
compact: true,
|
||||||
showAdvancedButton: true,
|
showAdvancedButton: true,
|
||||||
|
alwaysShowLines: 2,
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
register,
|
register,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue