form 表单 预览

This commit is contained in:
cxc
2022-12-21 17:16:20 +08:00
parent 0926b42051
commit 7c35ccd910
7 changed files with 197 additions and 100 deletions

View File

@ -98,7 +98,12 @@
class-name="small-padding fixed-width"
>
<template #default="{ row }">
<el-button size="small" link icon="view" @click="handleDetail(row)"
<el-button
size="small"
type="primary"
link
icon="view"
@click="handleDetail(row)"
>详情</el-button
>
<el-button

View File

@ -0,0 +1,178 @@
{
"formRef": "elForm",
"formModel": "formData",
"size": "default",
"labelPosition": "right",
"labelWidth": 100,
"formRules": "rules",
"gutter": 15,
"disabled": false,
"span": 24,
"formBtns": true,
"fields": [
{
"__config__": {
"label": "日期范围",
"tag": "el-date-picker",
"tagIcon": "date-range",
"defaultValue": ["2022-12-01", "2023-01-31"],
"span": 24,
"showLabel": true,
"labelWidth": null,
"required": true,
"layout": "colFormItem",
"regList": [],
"changeTag": true,
"document": "https://element-plus.org/zh-CN/component/date-picker",
"formId": 101,
"renderKey": "1011671526772143"
},
"style": { "width": "100%" },
"type": "daterange",
"range-separator": "至",
"start-placeholder": "开始日期",
"end-placeholder": "结束日期",
"disabled": false,
"clearable": true,
"format": "YYYY-MM-DD",
"value-format": "YYYY-MM-DD",
"readonly": false,
"__vModel__": "field101"
},
{
"__config__": {
"label": "请假天数",
"labelWidth": null,
"showLabel": true,
"changeTag": true,
"tag": "el-input",
"tagIcon": "input",
"required": true,
"layout": "colFormItem",
"span": 24,
"document": "https://element.eleme.cn/#/zh-CN/component/input",
"regList": [],
"formId": 101,
"renderKey": "1011670568285013",
"defaultValue": "180"
},
"__slot__": { "prepend": "", "append": "" },
"placeholder": "请输入请假天数",
"style": { "width": "100%" },
"clearable": true,
"prefix-icon": "",
"suffix-icon": "",
"maxlength": null,
"show-word-limit": false,
"readonly": false,
"disabled": false,
"__vModel__": "day"
},
{
"__config__": {
"label": "日期选择",
"tag": "el-date-picker",
"tagIcon": "date",
"defaultValue": "2022-12-21",
"showLabel": true,
"labelWidth": null,
"span": 24,
"layout": "colFormItem",
"required": true,
"regList": [],
"changeTag": true,
"document": "https://element-plus.org/zh-CN/component/date-picker",
"formId": 108,
"renderKey": "1081671607770402"
},
"placeholder": "请选择日期选择日期选择",
"type": "date",
"style": { "width": "100%" },
"disabled": false,
"clearable": true,
"format": "YYYY-MM-DD",
"value-format": "YYYY-MM-DD",
"readonly": false,
"__vModel__": "field108"
},
{
"__config__": {
"label": "多选框组",
"tag": "el-checkbox-group",
"tagIcon": "checkbox",
"defaultValue": [],
"span": 24,
"showLabel": true,
"labelWidth": null,
"layout": "colFormItem",
"optionType": "default",
"required": true,
"regList": [],
"changeTag": true,
"border": false,
"document": "https://element-plus.org/zh-CN/component/checkbox",
"formId": 110,
"renderKey": "1101671607780270"
},
"__slot__": {
"options": [
{ "label": "选项一", "value": 1, "disabled": false },
{ "label": "选项二", "value": 2, "disabled": false }
]
},
"style": {},
"size": "default",
"min": null,
"max": null,
"disabled": false,
"__vModel__": "field110"
},
{
"__config__": {
"label": "滑块",
"tag": "el-slider",
"tagIcon": "slider",
"defaultValue": 44,
"span": 24,
"showLabel": true,
"layout": "colFormItem",
"labelWidth": null,
"required": true,
"regList": [],
"changeTag": true,
"document": "https://element-plus.org/zh-CN/component/slider",
"formId": 109,
"renderKey": "1091671607775362"
},
"disabled": false,
"min": 0,
"max": 100,
"step": 1,
"show-stops": false,
"range": false,
"__vModel__": "field109"
},
{
"__config__": {
"label": "请假原因",
"showLabel": true,
"changeTag": true,
"labelWidth": null,
"tag": "editor",
"tagIcon": "edit",
"defaultValue": "",
"span": 24,
"layout": "colFormItem",
"required": true,
"regList": [],
"document": "http://tinymce.ax-z.cn",
"formId": 101,
"renderKey": "1011671607523731"
},
"placeholder": "请输入请假原因",
"height": 227,
"branding": false,
"__vModel__": "reason"
}
]
}

View File

@ -73,13 +73,7 @@ const layouts = {
key={config.renderKey}
conf={currentItem}
onInput={(event) => {
// console.log(event);
// // console.log(this.currentItem.__config__.defaultValue);
// this.$set(config, "defaultValue", event);
// // console.log(this.currentItem.__config__.defaultValue);
this.currentItem.__config__.defaultValue = event;
// config.defaultValue = event;
// config.defaultValue = event;
config.defaultValue = event;
}}
>
{{
@ -170,7 +164,7 @@ const layouts = {
key={config.renderKey}
conf={currentItem}
onInput={(event) => {
this.currentItem.__config__.defaultValue = event;
config.defaultValue = event;
}}
>
{child}

View File

@ -206,7 +206,7 @@
:modelValue="activeData.min"
:min="0"
placeholder="至少应选"
@input="$set(activeData, 'min', $event ? $event : undefined)"
@input="activeData.min = $event ? $event : undefined"
/>
</el-form-item>
<el-form-item
@ -217,7 +217,7 @@
:modelValue="activeData.max"
:min="0"
placeholder="最多可选"
@input="$set(activeData, 'max', $event ? $event : undefined)"
@input="activeData.max = $event ? $event : undefined"
/>
</el-form-item>
<el-form-item