form
表单
- 通过
form-designer拖拽schema生成表单JSON
基础用法
<template>
<adv-form :widgetList="formJson"></adv-form>
</template>
<script setup lang="ts">
const formJson = [
{
"type": "grid",
"displayName": "栅格",
"category": "container",
"icon": "Setting",
"cols": [
{
"type": "grid-col",
"displayName": "栅格列",
"category": "container",
"hidden": true,
"widgetList": [
{
"type": "input",
"displayName": "单行输入",
"icon": "House",
"options": {
"propName": "input1096735210",
"defaultValue": "",
"label": "input",
"labelAlign": "left",
"labelWidth": "80",
"labelHidden": false,
"isRequired": false,
"requiredMessage": "请输入",
"rule": "",
"errorMessage": "",
"value": "",
"displayType": "text",
"size": "default",
"placeholder": "请输入",
"readonly": false,
"disabled": false,
"clearable": false,
"hidden": false,
"onBlur": "",
"onFocus": "",
"onChange": "",
"onInput": "",
"onClear": "",
"originPropName": "input1096735210"
},
"originConfig": {
"type": "input",
"displayName": "单行输入",
"icon": "House",
"options": {
"propName": "",
"defaultValue": "",
"label": "input",
"labelAlign": "left",
"labelWidth": "80",
"labelHidden": false,
"isRequired": false,
"requiredMessage": "请输入",
"rule": "",
"errorMessage": "",
"value": "",
"displayType": "text",
"size": "default",
"placeholder": "请输入",
"readonly": false,
"disabled": false,
"clearable": false,
"hidden": false,
"onBlur": "",
"onFocus": "",
"onChange": "",
"onInput": "",
"onClear": ""
}
},
"id": "cde606f7",
"formConfig": {},
"index": 0
}
],
"options": {
"propName": "grid-col62742244",
"span": 12,
"offset": 0,
"push": 0,
"pull": 0,
"originPropName": "grid-col62742244"
},
"originConfig": {
"type": "grid-col",
"displayName": "栅格列",
"category": "container",
"hidden": true,
"widgetList": [],
"options": {
"propName": "",
"span": 12,
"offset": 0,
"push": 0,
"pull": 0
}
},
"id": "e3522a8d",
"formConfig": {}
},
{
"type": "grid-col",
"displayName": "栅格列",
"category": "container",
"hidden": true,
"widgetList": [
{
"type": "checkbox",
"displayName": "多选项",
"icon": "Link",
"options": {
"propName": "checkbox16957687",
"label": "checkbox",
"labelAlign": "left",
"labelWidth": "80",
"labelHidden": false,
"isRequired": false,
"requiredMessage": "请输入",
"rule": "",
"errorMessage": "",
"value": [],
"widgetSize": "small",
"size": "default",
"disabled": false,
"optionItem": [
{
"label": "a",
"value": 1
},
{
"label": "b",
"value": 2
},
{
"label": "c",
"value": 3
}
],
"hidden": false,
"onChange": "",
"originPropName": "checkbox16957687"
},
"originConfig": {
"type": "checkbox",
"displayName": "多选项",
"icon": "Link",
"options": {
"propName": "",
"label": "checkbox",
"labelAlign": "left",
"labelWidth": "80",
"labelHidden": false,
"isRequired": false,
"requiredMessage": "请输入",
"rule": "",
"errorMessage": "",
"value": [],
"widgetSize": "small",
"size": "default",
"disabled": false,
"optionItem": [
{
"label": "a",
"value": 1
},
{
"label": "b",
"value": 2
},
{
"label": "c",
"value": 3
}
],
"hidden": false,
"onChange": ""
}
},
"id": "91dcf6c7",
"formConfig": {},
"index": 0
}
],
"options": {
"propName": "grid-col344710346",
"span": 12,
"offset": 0,
"push": 0,
"pull": 0,
"originPropName": "grid-col344710346"
},
"originConfig": {
"type": "grid-col",
"displayName": "栅格列",
"category": "container",
"hidden": true,
"widgetList": [],
"options": {
"propName": "",
"span": 12,
"offset": 0,
"push": 0,
"pull": 0
}
},
"id": "478895f2",
"formConfig": {}
}
],
"options": {
"propName": "grid771059446",
"hidden": false,
"colHeight": "50",
"optionItem": [],
"gutter": 0,
"justify": "",
"align": "",
"originPropName": "grid771059446"
},
"originConfig": {
"type": "grid",
"displayName": "栅格",
"category": "container",
"icon": "Setting",
"cols": [],
"options": {
"propName": "",
"hidden": false,
"colHeight": "50",
"optionItem": [],
"gutter": 0,
"justify": "",
"align": ""
}
},
"id": "0425d4ba",
"formConfig": {},
"index": 0
},
{
"type": "grid",
"displayName": "栅格",
"category": "container",
"icon": "Setting",
"cols": [
{
"type": "grid-col",
"displayName": "栅格列",
"category": "container",
"hidden": true,
"widgetList": [
{
"type": "switch",
"displayName": "开关",
"icon": "Clock",
"options": {
"propName": "switch36310107103",
"defaultValue": "",
"label": "switch",
"labelAlign": "left",
"labelWidth": "80",
"labelHidden": false,
"value": "",
"widgetSize": "small",
"size": "default",
"disabled": false,
"hidden": false,
"loading": false,
"activeValue": true,
"InactiveValue": false,
"originPropName": "switch36310107103"
},
"originConfig": {
"type": "switch",
"displayName": "开关",
"icon": "Clock",
"options": {
"propName": "",
"defaultValue": "",
"label": "switch",
"labelAlign": "left",
"labelWidth": "80",
"labelHidden": false,
"value": "",
"widgetSize": "small",
"size": "default",
"disabled": false,
"hidden": false,
"loading": false,
"activeValue": true,
"InactiveValue": false
}
},
"id": "f2d6b958",
"formConfig": {},
"index": 0
}
],
"options": {
"propName": "grid-col1037105645",
"span": 12,
"offset": 0,
"push": 0,
"pull": 0,
"originPropName": "grid-col1037105645"
},
"originConfig": {
"type": "grid-col",
"displayName": "栅格列",
"category": "container",
"hidden": true,
"widgetList": [],
"options": {
"propName": "",
"span": 12,
"offset": 0,
"push": 0,
"pull": 0
}
},
"id": "856b5a2f",
"formConfig": {}
},
{
"type": "grid-col",
"displayName": "栅格列",
"category": "container",
"hidden": true,
"widgetList": [
{
"type": "button",
"displayName": "按钮",
"icon": "ChatDotRound",
"options": {
"propName": "button765885110",
"name": "button",
"value": "",
"widgetSize": "small",
"size": "default",
"type": "primary",
"disabled": false,
"readonly": false,
"hidden": false,
"onClick": "",
"url": "",
"loading": false,
"originPropName": "button765885110"
},
"originConfig": {
"type": "button",
"displayName": "按钮",
"icon": "ChatDotRound",
"options": {
"propName": "",
"name": "button",
"value": "",
"widgetSize": "small",
"size": "default",
"type": "primary",
"disabled": false,
"readonly": false,
"hidden": false,
"onClick": "",
"url": "",
"loading": false
}
},
"id": "841cae97",
"formConfig": {},
"index": 0
}
],
"options": {
"propName": "grid-col83815126",
"span": 12,
"offset": 0,
"push": 0,
"pull": 0,
"originPropName": "grid-col83815126"
},
"originConfig": {
"type": "grid-col",
"displayName": "栅格列",
"category": "container",
"hidden": true,
"widgetList": [],
"options": {
"propName": "",
"span": 12,
"offset": 0,
"push": 0,
"pull": 0
}
},
"id": "6b3e21be",
"formConfig": {}
}
],
"options": {
"propName": "grid484310891",
"hidden": false,
"colHeight": "50",
"optionItem": [],
"gutter": 0,
"justify": "",
"align": "",
"originPropName": "grid484310891"
},
"originConfig": {
"type": "grid",
"displayName": "栅格",
"category": "container",
"icon": "Setting",
"cols": [],
"options": {
"propName": "",
"hidden": false,
"colHeight": "50",
"optionItem": [],
"gutter": 0,
"justify": "",
"align": ""
}
},
"id": "5232c773",
"formConfig": {},
"index": 1
}
];
</script>
<style scoped></style>属性
插槽
| 插槽名 | 是否必填 | 默认值 | 说明 |
|---|