144 lines
3.4 KiB
Vue
144 lines
3.4 KiB
Vue
|
<!-- 动态增减表单 -->
|
|||
|
|
<template>
|
|||
|
|
<!-- 自定义表单 -->
|
|||
|
|
<BasicForm @register="registerForm" style="margin-top: 20px;" @submit="handleSubmit">
|
|||
|
|
<!-- 添加input的插槽 -->
|
|||
|
|
<template #addForm="{ field }">
|
|||
|
|
<a-button v-if="Number(field) === 0" @click="addField" style="width: 50px">+</a-button>
|
|||
|
|
<a-button v-if="Number(field) > 0" @click="delField(field)" style="width: 50px">-</a-button>
|
|||
|
|
</template>
|
|||
|
|
</BasicForm>
|
|||
|
|
<!-- <div style="margin: 20px auto; text-align: center">
|
|||
|
|
<a-button @click="addField">添加表单项</a-button>
|
|||
|
|
</div>-->
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
//引入依赖
|
|||
|
|
import { useForm, BasicForm, FormSchema } from '/@/components/Form';
|
|||
|
|
import { CollapseContainer } from '/@/components/Container';
|
|||
|
|
import { ref } from '@vue/runtime-core';
|
|||
|
|
|
|||
|
|
//自定义表单字段
|
|||
|
|
const formSchemas: FormSchema[] = [
|
|||
|
|
{
|
|||
|
|
field: 'name1',
|
|||
|
|
label: '姓名1',
|
|||
|
|
component: 'Input',
|
|||
|
|
// ifShow:false,
|
|||
|
|
colProps: {
|
|||
|
|
span: 8,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'age1',
|
|||
|
|
label: '年龄1',
|
|||
|
|
component: 'InputNumber',
|
|||
|
|
// ifShow:false,
|
|||
|
|
colProps: {
|
|||
|
|
span: 8,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: '0',
|
|||
|
|
component: 'Input',
|
|||
|
|
// ifShow:false,
|
|||
|
|
label: ' ',
|
|||
|
|
colProps: {
|
|||
|
|
span: 8,
|
|||
|
|
},
|
|||
|
|
slot: 'addForm',
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* BasicForm绑定注册;
|
|||
|
|
* appendSchemaByField:增加表单项（字段）
|
|||
|
|
*
|
|||
|
|
* removeSchemaByFiled:减少表单项（字段）
|
|||
|
|
*/
|
|||
|
|
const [registerForm, { appendSchemaByField, removeSchemaByFiled }] = useForm({
|
|||
|
|
schemas: formSchemas,
|
|||
|
|
showResetButton: false,
|
|||
|
|
labelWidth: '150px',
|
|||
|
|
// showSubmitButton:false
|
|||
|
|
submitButtonOptions: { text: '提交', preIcon: '' },
|
|||
|
|
actionColOptions: { span: 17 },
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//组件个数
|
|||
|
|
let n = ref<number>(2);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 添加字段
|
|||
|
|
* appendSchemaByField类型: ( schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined ) => Promise<void>
|
|||
|
|
* 说明: 插入到指定 filed 后面，如果没传指定 field，则插入到最后,当 first = true 时插入到第一个位置
|
|||
|
|
*/
|
|||
|
|
async function addField() {
|
|||
|
|
//添加表单字段，里面为schemas对应的属性，可自行配置
|
|||
|
|
await appendSchemaByField(
|
|||
|
|
{
|
|||
|
|
field: `name${n.value}`,
|
|||
|
|
component: 'Input',
|
|||
|
|
label: '字段' + n.value,
|
|||
|
|
colProps: {
|
|||
|
|
span: 8,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
''
|
|||
|
|
);
|
|||
|
|
await appendSchemaByField(
|
|||
|
|
{
|
|||
|
|
field: `sex${n.value}`,
|
|||
|
|
component: 'InputNumber',
|
|||
|
|
label: '字段' + n.value,
|
|||
|
|
colProps: {
|
|||
|
|
span: 8,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
''
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
await appendSchemaByField(
|
|||
|
|
{
|
|||
|
|
field: `${n.value}`,
|
|||
|
|
component: 'Input',
|
|||
|
|
label: ' ',
|
|||
|
|
colProps: {
|
|||
|
|
span: 8,
|
|||
|
|
},
|
|||
|
|
slot: 'addForm',
|
|||
|
|
},
|
|||
|
|
''
|
|||
|
|
);
|
|||
|
|
n.value++;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 删除字段
|
|||
|
|
* 类型: (field: string | string[]) => Promise<void>
|
|||
|
|
* 说明: 根据 field 删除 Schema
|
|||
|
|
* @param field 当前字段名称
|
|||
|
|
*/
|
|||
|
|
function delField(field) {
|
|||
|
|
//移除指定字段
|
|||
|
|
removeSchemaByFiled([`name${field}`, `sex${field}`, `${field}`]);
|
|||
|
|
n.value--;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 点击提交按钮的value值
|
|||
|
|
* @param values
|
|||
|
|
*/
|
|||
|
|
function handleSubmit(values: any) {
|
|||
|
|
console.log('提交按钮数据::::', values);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/** 数字输入框样式 */
|
|||
|
|
:deep(.ant-input-number) {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|