u

code/g3soft-libs/docs/examples/form/group.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// FormGroup：在长表单里做「分组 + 组内独立列数」，组内覆盖组外布局
+import { reactive } from 'vue'
+import { G3Button, G3Form, G3FormGroup, G3FormItem, G3Input } from '@g3soft/ui'
+
+const model = reactive({ host: '', port: '', username: '', password: '' })
+</script>
+
+<template>
+  <G3Form :model="model" layout="vertical" style="max-width: 620px" @submit="() => {}">
+    <G3FormGroup title="服务地址" :columns="2">
+      <G3FormItem name="host" label="主机">
+        <G3Input v-model="model.host" />
+      </G3FormItem>
+      <G3FormItem name="port" label="端口">
+        <G3Input v-model="model.port" type="number" />
+      </G3FormItem>
+    </G3FormGroup>
+
+    <G3FormGroup title="认证信息" :columns="2">
+      <G3FormItem name="username" label="账号">
+        <G3Input v-model="model.username" />
+      </G3FormItem>
+      <G3FormItem name="password" label="密码">
+        <G3Input v-model="model.password" type="password" />
+      </G3FormItem>
+    </G3FormGroup>
+
+    <G3FormItem>
+      <G3Button html-type="submit">连接</G3Button>
+    </G3FormItem>
+  </G3Form>
+</template>