pengjunjie/JeecgBoot
1
0
Fork 1
mirror of https://github.com/jeecgboot/JeecgBoot.git synced 2026-02-04 09:35:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

前端和后端源码，合并到一个git仓库中，方便用户下载，避免前后端不匹配的问题

Browse Source
This commit is contained in:
JEECG
2024-06-23 10:39:52 +08:00
parent bb918b742e
commit 0325e34dcb
1439 changed files with 171106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
jeecgboot-vue3/src/views/demo/form/AdvancedForm.vue Normal file
View File

@ -0,0 +1,190 @@
<template>
<PageWrapper title="可折叠表单示例">
<CollapseContainer title="基础收缩示例">
<BasicForm @register="register" />
</CollapseContainer>
<CollapseContainer title="超过3行自动收起，折叠时保留2行" class="mt-4">
<BasicForm @register="register1" />
</CollapseContainer>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { CollapseContainer } from '/@/components/Container';
import { PageWrapper } from '/@/components/Page';
const getSchamas = (): FormSchema[] => {
return [
{
field: 'field1',
component: 'Input',
label: '字段1',
colProps: {
span: 8,
},
componentProps: {
placeholder: '自定义placeholder',
onChange: (e: any) => {
console.log(e);
},
},
},
{
field: 'field2',
component: 'Input',
label: '字段2',
colProps: {
span: 8,
},
},
{
field: 'field3',
component: 'DatePicker',
label: '字段3',
colProps: {
span: 8,
},
},
{
field: 'field4',
component: 'Select',
label: '字段4',
colProps: {
span: 8,
},
componentProps: {
options: [
{
label: '选项1',
value: '1',
key: '1',
},
{
label: '选项2',
value: '2',
key: '2',
},
],
},
},
{
field: 'field5',
component: 'CheckboxGroup',
label: '字段5',
colProps: {
span: 8,
},
componentProps: {
options: [
{
label: '选项1',
value: '1',
},
{
label: '选项2',
value: '2',
},
],
},
},
// {
// field: 'field7',
// component: 'RadioGroup',
// label: '字段7',
// colProps: {
// span: 8,
// },
// componentProps: {
// options: [
// {
// label: '选项1',
// value: '1',
// },
// {
// label: '选项2',
// value: '2',
// },
// ],
// },
// },
];
};
function getAppendSchemas(): FormSchema[] {
return [
{
field: 'field10',
component: 'Input',
label: '字段10',
colProps: {
span: 8,
},
},
{
field: 'field11',
component: 'Input',
label: '字段11',
colProps: {
span: 8,
},
},
{
field: 'field12',
component: 'Input',
label: '字段12',
colProps: {
span: 8,
},
},
{
field: 'field13',
component: 'Input',
label: '字段13',
colProps: {
span: 8,
},
},
];
}
export default defineComponent({
components: { BasicForm, CollapseContainer, PageWrapper },
setup() {
const [register] = useForm({
labelWidth: 120,
schemas: getSchamas(),
actionColOptions: {
span: 24,
},
compact: true,
showAdvancedButton: true,
});
const extraSchemas: FormSchema[] = [];
for (let i = 14; i < 30; i++) {
extraSchemas.push({
field: 'field' + i,
component: 'Input',
label: '字段' + i,
colProps: {
span: 8,
},
});
}
const [register1] = useForm({
labelWidth: 120,
schemas: [...getSchamas(), ...getAppendSchemas(), { field: '', component: 'Divider', label: '更多字段' }, ...extraSchemas],
actionColOptions: {
span: 24,
},
compact: true,
showAdvancedButton: true,
alwaysShowLines: 2,
});
return {
register,
register1,
};
},
});
</script>