Skip to content
On this page

网格表单

用于 Grid 布局的动态表单,常用于多字段大表单。以 ElementUI Form 为基础定制样式和 API,并提供了一些额外的功能。

基础用法

待修复:Element Plus 下的样式

基本信息
所在楼层
楼层使用名称
建筑面积
共用面积
vue
<script setup lang="ts">
const model = ref<Record<string, any>>({})
const items = [
  { prop: 'floor', el: 'input', label: '所在楼层', span: 2, prefixTitle: '基本信息'},
  { prop: 'floorNumber', el: 'input', label: '楼层使用名称', required: true },
  { prop: 'buildingArea', el: 'input', label: '建筑面积', required: true },
  { prop: 'sharedArea', el: 'input', label: '共用面积', type: 'number' }
]
</script>
<template>
<cat-grid-form :model="model" :items="items"></cat-grid-form>
</template>

GridForm Attributes

扩展于: ElementUI Form Attributes

参数说明类型可选值默认值
model表单数据对象object--
items表单项的配置项 详见 GridFormItem Propsarray--
colsGrid下的列数 3列或4列时支持默认表单最大宽度 其他列数需要传入 max-width 用于计算number-3
maxWidth表单最大宽度 用于计算 Grid 列宽number-587

GridFormItem Props

扩展于: ElementUI FormItem AttributesElementUI FormItem Events 可作为参数直接传入

参数说明类型可选值默认值
el受控组件元素类型stringinput|number|select|time-picker|date-picker|slot-
spangrid布局下所占格数number-1
rowIndex待定grid布局下所在行数number--
prefixTitle前缀标题string--
rangeStartKeydate-picker的开始时间的keystring-startTime
rangeEndKeydate-picker的结束时间的keystring-endTime
optionscat-option的数据项
与dict二选一
array-[]
dictcat-option的数据项
与options二选一
string--
optionPropscat-option的数据项的参数object--

GridForm Methods

参考 ElementUI Form Methods

GridForm Events

参考 ElementUI Form Events

GridFormItem Slot

name说明el类型
[prop]-labelel-form-item的label-
input-prefix [-suffix] [-prepend] [-append]el-input的内容input
select-prefix [-empty]el-select的内容select
[prop]受控组件的内容slot

Released under the MIT License.