FormGrid 珊格表单

快速的数据化配置一个珊格布局表单。

基础使用

grid 的 span 属性为表单设置全局的排版，item 的栅格属性优先级最高。

点击查看代码

<template>
  <ElForm label-width="80px" :model="form.model" class="demo">
    <AgelFormGrid :items="form.items" :span="8" :gutter="10"> </AgelFormGrid>
  </ElForm>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const form = reactive({
  model: {},
  items: [
    { prop: "name", label: "姓名", },
    { prop: "sex", label: "性别", slot: 'agel-select', attrs: { options: ['男', '女'] } },
    { prop: "intor", label: "介绍" },
    { prop: "address", label: "地址", span: 24 },
  ],
})

</script>

自适应表单

设置 responsive:true 开启响应式

根据容器宽度（非窗口宽度）自动调整栅格大小，可通过 responsiveMethod 来自定义规则。

点击查看代码

<template>
  <div class="demo">
    <ElSlider v-model="width" :step="50" show-stops :min="400" :max="1600" :format-tooltip="(v) => `容器宽度：${v}px`">
    </ElSlider>
    <div style="overflow: auto;">
      <ElForm label-width="auto" :model="form.model" :style="{ width: width + 'px' }" class="demo" >
        <AgelFormGrid :items="form.items" responsive> </AgelFormGrid>
      </ElForm>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const width = ref(600)
const form = reactive({
  model: {},
  items: [
    { label: '珊格0', prop: 'name0', span: 24, },
    ...Array.from({ length: 12 }).map((v, i) => {
      return { label: '珊格珊格', prop: 'name' + String(i + 1), }
    })
  ]
})
</script>

属性

属性	类型	默认值	说明
items	ItemProps[]	-	表单配置项
model-prop	string	-	表单 model 键名
scope	object	-	表单项插槽作用域参数
view-model	boolean	-	视图模式，只渲染 value
responsive	boolean	-	是否开启自适应容器
responsive-method	(width: number) => number	-	自定义自适应容器方法
span	number	24	珊格列
gutter	number	18	珊格间距
......	RowProps	-	ElRow 属性

ItemProps

属性	类型	默认值	说明
......	-	-	AgelFormItem 属性
span, push, pull, offset	-	-	ElCol 属性

方法

名称	参数	说明
getRef	prop	获取组件实例
validate	(callback)=>Promise	对整个 items 表单进行验证
resetFields	props	重置表单

插槽

名称	插槽作用域	说明
slot-xx	itemProps	item 组件具名插槽
prepend	-	items 前置插槽
append	-	items 后置插槽