From 93f9a19aa16a3e9cb95338417c52d9a398e3f70b Mon Sep 17 00:00:00 2001
From: 无木 <netfan@foxmail.com>
Date: 星期五, 13 八月 2021 11:51:23 +0800
Subject: [PATCH] feat(form): add `alwaysShowLines` prop
---
src/views/demo/form/AdvancedForm.vue | 16 ++++++++++++++--
src/components/Form/src/props.ts | 2 ++
src/components/Form/src/hooks/useAdvanced.ts | 2 +-
src/components/Form/src/types/form.ts | 2 ++
CHANGELOG.zh_CN.md | 1 +
5 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index b3f7749..fca530e 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -3,6 +3,7 @@
### 鉁� Features
- **BasicTree** 娣诲姞鎼滅储鍔熻兘鐩稿叧灞炴�у拰鏂规硶
+- **BasicForm** 鏂板`alwaysShowLines`鐢ㄤ簬璁剧疆鎶樺彔鏃朵繚鐣欐樉绀虹殑琛屾暟
### 馃悰 Bug Fixes
diff --git a/src/components/Form/src/hooks/useAdvanced.ts b/src/components/Form/src/hooks/useAdvanced.ts
index f8d49ea..b8cd3d5 100644
--- a/src/components/Form/src/hooks/useAdvanced.ts
+++ b/src/components/Form/src/hooks/useAdvanced.ts
@@ -103,7 +103,7 @@
}
return { isAdvanced: advanceState.isAdvanced, itemColSum };
}
- if (itemColSum > BASIC_COL_LEN) {
+ if (itemColSum > BASIC_COL_LEN * (unref(getProps).alwaysShowLines || 1)) {
return { isAdvanced: advanceState.isAdvanced, itemColSum };
} else {
// The first line is always displayed
diff --git a/src/components/Form/src/props.ts b/src/components/Form/src/props.ts
index a165673..36237f4 100644
--- a/src/components/Form/src/props.ts
+++ b/src/components/Form/src/props.ts
@@ -59,6 +59,8 @@
rulesMessageJoinLabel: propTypes.bool.def(true),
// 瓒呰繃3琛岃嚜鍔ㄦ姌鍙�
autoAdvancedLine: propTypes.number.def(3),
+ // 涓嶅彈鎶樺彔褰卞搷鐨勮鏁�
+ alwaysShowLines: propTypes.number.def(1),
// 鏄惁鏄剧ず鎿嶄綔鎸夐挳
showActionButtonGroup: propTypes.bool.def(true),
diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts
index 0e84b13..5793adc 100644
--- a/src/components/Form/src/types/form.ts
+++ b/src/components/Form/src/types/form.ts
@@ -97,6 +97,8 @@
autoFocusFirstItem?: boolean;
// Automatically collapse over the specified number of rows
autoAdvancedLine?: number;
+ // Always show lines
+ alwaysShowLines?: number;
// Whether to show the operation button
showActionButtonGroup?: boolean;
diff --git a/src/views/demo/form/AdvancedForm.vue b/src/views/demo/form/AdvancedForm.vue
index 8cc5380..03bb165 100644
--- a/src/views/demo/form/AdvancedForm.vue
+++ b/src/views/demo/form/AdvancedForm.vue
@@ -4,7 +4,7 @@
<BasicForm @register="register" />
</CollapseContainer>
- <CollapseContainer title="瓒呰繃3琛岃嚜鍔ㄦ敹璧�" class="mt-4">
+ <CollapseContainer title="瓒呰繃3琛岃嚜鍔ㄦ敹璧凤紝鎶樺彔鏃朵繚鐣�2琛�" class="mt-4">
<BasicForm @register="register1" />
</CollapseContainer>
</PageWrapper>
@@ -160,14 +160,26 @@
compact: 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({
labelWidth: 120,
- schemas: [...getSchamas(), ...getAppendSchemas()],
+ schemas: [...getSchamas(), ...getAppendSchemas(), ...extraSchemas],
actionColOptions: {
span: 24,
},
compact: true,
showAdvancedButton: true,
+ alwaysShowLines: 2,
});
return {
register,
--
Gitblit v1.8.0