网格表单
用于 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 Props | array | - | - |
cols | Grid下的列数 3列或4列时支持默认表单最大宽度 其他列数需要传入 max-width 用于计算 | number | - | 3 |
maxWidth | 表单最大宽度 用于计算 Grid 列宽 | number | - | 587 |
GridFormItem Props
扩展于: ElementUI FormItem Attributes、 ElementUI FormItem Events 可作为参数直接传入
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
el | 受控组件元素类型 | string | input|number|select|time-picker|date-picker|slot | - |
span | grid布局下所占格数 | number | - | 1 |
rowIndex待定 | grid布局下所在行数 | number | - | - |
prefixTitle | 前缀标题 | string | - | - |
rangeStartKey | date-picker的开始时间的key | string | - | startTime |
rangeEndKey | date-picker的结束时间的key | string | - | endTime |
options | cat-option的数据项 与dict二选一 | array | - | [] |
dict | cat-option的数据项 与options二选一 | string | - | - |
optionProps | cat-option的数据项的参数 | object | - | - |
GridForm Methods
GridForm Events
GridFormItem Slot
name | 说明 | el类型 |
---|---|---|
[prop]-label | el-form-item的label | - |
input-prefix [-suffix] [-prepend] [-append] | el-input的内容 | input |
select-prefix [-empty] | el-select的内容 | select |
[prop] | 受控组件的内容 | slot |