u

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// 多列表单：columns 开启网格，FormItem 用 span 跨列、lineStart 强制换行
+import { reactive } from 'vue'
+import { G3Button, G3Form, G3FormItem, G3Input, G3Select } from '@g3soft/ui'
+
+const model = reactive({
+  name: '',
+  code: '',
+  owner: undefined as number | undefined,
+  description: '',
+})
+</script>
+
+<template>
+  <G3Form
+    :model="model"
+    layout="vertical"
+    :columns="2"
+    :gap="{ row: 16, col: 16 }"
+    style="max-width: 640px"
+    @submit="() => {}"
+  >
+    <G3FormItem name="name" label="项目名称">
+      <G3Input v-model="model.name" />
+    </G3FormItem>
+    <G3FormItem name="code" label="项目标识">
+      <G3Input v-model="model.code" />
+    </G3FormItem>
+    <G3FormItem name="owner" label="负责人">
+      <G3Select
+        v-model="model.owner"
+        :options="[
+          { label: '张三', value: 1 },
+          { label: '李四', value: 2 },
+        ]"
+      />
+    </G3FormItem>
+    <!-- span 2：占满整行 -->
+    <G3FormItem name="description" label="项目描述" :span="2">
+      <G3Input v-model="model.description" type="textarea" :rows="3" />
+    </G3FormItem>
+    <G3FormItem :span="2">
+      <G3Button html-type="submit">保存</G3Button>
+    </G3FormItem>
+  </G3Form>
+</template>