提交 93f9a19a 编写于 作者: 无木

feat(form): add `alwaysShowLines` prop

允许设置Form折叠时始终保持显示状态的行数

close: #1051
上级 61d853e6
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
### ✨ Features ### ✨ Features
- **BasicTree** 添加搜索功能相关属性和方法 - **BasicTree** 添加搜索功能相关属性和方法
- **BasicForm** 新增`alwaysShowLines`用于设置折叠时保留显示的行数
### 🐛 Bug Fixes ### 🐛 Bug Fixes
......
...@@ -103,7 +103,7 @@ export default function ({ ...@@ -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 = { ...@@ -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 { ...@@ -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 @@ ...@@ -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 @@ ...@@ -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,
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册