CommonComplexForm 复杂表单 #
基础用法 #
<template>
<!--<div class="demo">
<common-card-group
:card-numbers="cardNumbers"
:card-infos="cardInfos"
:span="6"
:btns="btns"
:cards="cards"
@handel-click-create-card="handelClickCreateCard"
></common-card-group>
</div>-->
<el-button @click.stop="showDialogFn">打开弹窗</el-button>
<common-dialog
v-if="showDialog"
:title="'创建复杂表格'"
@close-dialog="closeDialog"
@confirm-dialog="confirmDialog"
>
<common-complex-form :complex-forms="complexForms"></common-complex-form>
</common-dialog>
</template>
<script setup lang="ts">
// import { ElMessage } from 'element-plus';
import { ref } from 'vue';
function edit() {
// ElMessage('编辑');
}
function start() {}
const showDialog = ref<any>(false);
// 添加新卡片
function handelClickCreateCard() {
showDialog.value = true;
}
// 复杂表单
const complexForms = ref<any>([
{
label: '名称',
name: 'name',
type: 'input',
value: '',
attrs: {
placeholder: '请输入名称'
}
},
{
label: '标识符',
name: 'log',
type: 'input',
value: '',
attrs: {
placeholder: '请输入标识符'
}
},
{
label: '数据类型',
name: 'dataType',
type: 'select',
value: '',
attrs: {
placeholder: '请选择数据类型',
clearable: true,
options: [
{ label: '文本', value: 'text' },
{ label: '数字', value: 'number' },
{ label: '日期', value: 'date' },
{ label: '枚举', value: 'enum' }
]
},
childForms: {
text: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }],
number: [
{ label: '精度', name: 'jingdu', type: 'input', value: '' },
{ label: '单位', name: 'unit', type: 'select', value: '' },
{ label: '读写类型', name: 'type', type: 'radio', value: '' }
],
date: [
{ label: '时间格式', name: 'dateformate', type: 'input', value: '' },
{ label: '读写类型', name: 'type', type: 'radio', value: '' }
],
enum: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }]
}
},
{
label: '数据长度',
name: 'data',
type: 'input',
value: '',
attrs: {
placeholder: '请输入数据长度'
}
}
]);
function showDialogFn() {
showDialog.value = true
}
// 关闭弹窗
function closeDialog() {
showDialog.value = false;
}
// 确认创建
function confirmDialog() {
closeDialog();
}
</script>
<template>
<!--<div class="demo">
<common-card-group
:card-numbers="cardNumbers"
:card-infos="cardInfos"
:span="6"
:btns="btns"
:cards="cards"
@handel-click-create-card="handelClickCreateCard"
></common-card-group>
</div>-->
<el-button @click.stop="showDialogFn">打开弹窗</el-button>
<common-dialog
v-if="showDialog"
:title="'创建复杂表格'"
@close-dialog="closeDialog"
@confirm-dialog="confirmDialog"
>
<common-complex-form :complex-forms="complexForms"></common-complex-form>
</common-dialog>
</template>
<script setup lang="ts">
// import { ElMessage } from 'element-plus';
import { ref } from 'vue';
function edit() {
// ElMessage('编辑');
}
function start() {}
const showDialog = ref<any>(false);
// 添加新卡片
function handelClickCreateCard() {
showDialog.value = true;
}
// 复杂表单
const complexForms = ref<any>([
{
label: '名称',
name: 'name',
type: 'input',
value: '',
attrs: {
placeholder: '请输入名称'
}
},
{
label: '标识符',
name: 'log',
type: 'input',
value: '',
attrs: {
placeholder: '请输入标识符'
}
},
{
label: '数据类型',
name: 'dataType',
type: 'select',
value: '',
attrs: {
placeholder: '请选择数据类型',
clearable: true,
options: [
{ label: '文本', value: 'text' },
{ label: '数字', value: 'number' },
{ label: '日期', value: 'date' },
{ label: '枚举', value: 'enum' }
]
},
childForms: {
text: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }],
number: [
{ label: '精度', name: 'jingdu', type: 'input', value: '' },
{ label: '单位', name: 'unit', type: 'select', value: '' },
{ label: '读写类型', name: 'type', type: 'radio', value: '' }
],
date: [
{ label: '时间格式', name: 'dateformate', type: 'input', value: '' },
{ label: '读写类型', name: 'type', type: 'radio', value: '' }
],
enum: [{ label: '读写类型', name: 'type', type: 'radio', value: '' }]
}
},
{
label: '数据长度',
name: 'data',
type: 'input',
value: '',
attrs: {
placeholder: '请输入数据长度'
}
}
]);
function showDialogFn() {
showDialog.value = true
}
// 关闭弹窗
function closeDialog() {
showDialog.value = false;
}
// 确认创建
function confirmDialog() {
closeDialog();
}
</script>
显示代码
复制代码片段
配置参数 #
参数 | 说明 | 类型 | 是否必须 |
---|---|---|---|
complexForms | 复杂表单表单元素列表 | Array[Object],其中卡片内部字段 | true |
---- label | 表单元素中文显示 | String | true |
---- value | 表单元素v-model绑定值 | String Array, Boolean | true |
---- type | 目前暂时支持的表单元素类型有: input/textarea/select/input-num/radio/cascader/switch/checkbox/check-group/date-picker | String | true |
---- attrs | 表单元素v-bind属性,支持原本element-plus中表单元素属性,另外对部分表单元素进行封装,支持自定义属性传递。下面有单独对自定义封装表单元素进行讲解 | Obkect | false |
childForms | 联动表单元素对象 | Object | false |
事件 #
事件名称 | 说明 | 回调 |
---|---|---|
handelClickCreateCard | 点击新增时,触发回调函数 | -- |