Vxe UI vxe-form 实现折叠表单，当表单很多时实现自动收起与展开

Vxe UI vue vxe-form 实现折叠表单，当表单很多时实现自动收起与展开

代码

folding 用于将当前表单项设置为默认隐藏
collapse-node 设置折叠按钮，加上之后会自动在该表单项的右侧显示一个折叠按钮

<template><div><vxe-formtitle-colonref="formRef"title-width="100"title-align="right":data="formData"@submit="submitEvent"><vxe-form-item title="名称" field="name" span="12"><template #default="params"><vxe-input v-model="formData.name"></vxe-input></template></vxe-form-item><vxe-form-item title="昵称" field="nickname" span="12"><template #default="params"><vxe-input v-model="formData.nickname"></vxe-input></template></vxe-form-item><vxe-form-item title="角色" field="role" span="12" folding><template #default="params"><vxe-input v-model="formData.role"></vxe-input></template></vxe-form-item><vxe-form-item title="性别" field="sex" span="12" folding><template #default="params"><vxe-input v-model="formData.sex"></vxe-input></template></vxe-form-item><vxe-form-item title="年龄" field="age" span="12" folding><template #default="params"><vxe-input v-model="formData.age"></vxe-input></template></vxe-form-item><vxe-form-item title="大小" field="num" span="12" folding><template #default="params"><vxe-input v-model="formData.num"></vxe-input></template></vxe-form-item><vxe-form-item title="创建时间" field="createDate" span="12" folding><template #default="params"><vxe-input v-model="formData.createDate"></vxe-input></template></vxe-form-item><vxe-form-item title="更新时间" field="updateDate" span="12" folding><template #default="params"><vxe-input v-model="formData.updateDate"></vxe-input></template></vxe-form-item><vxe-form-item align="center" span="24" collapse-node><template #default><vxe-button type="submit" status="primary" content="搜索"></vxe-button></template></vxe-form-item></vxe-form></div>
</template><script setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const formRef = ref()
const formData = ref({name: 'test1',role: '',nickname: 'Testing',sex: '',age: '',num: '',createDate: '',updateDate: ''
})const changeEvent = (params) => {const $form = formRef.valueif ($form) {$form.updateStatus(params)}
}const submitEvent = () => {VxeUI.modal.message({ content: '保存成功', status: 'success' })
}
</script>

效果如下：

请添加图片描述

配置式表单也是一样的

<template><div><vxe-form v-bind="formOptions" v-on="formEvents" ></vxe-form></div>
</template><script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const formOptions = reactive({titleWidth: 100,titleColon: true,titleAlign: 'right',data: {name: 'test1',role: '',nickname: 'Testing',sex: '',age: '',num: '',createDate: '',updateDate: ''},items: [{ field: 'name', title: '名称', span: 12, itemRender: { name: 'VxeInput' } },{ field: 'nickname', title: '昵称', span: 12, itemRender: { name: 'VxeInput' } },{ field: 'role', title: '角色', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'sex', title: '性别', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'age', title: '年龄', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'num', title: '大小', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'createDate', title: '创建时间', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'updateDate', title: '更新时间', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{align: 'center',span: 24,collapseNode: true,itemRender: {name: 'VxeButtonGroup',options: [{ type: 'submit', content: '搜索', status: 'primary' }]}}]
})const formEvents = {submit () {VxeUI.modal.message({ content: '点击搜索', status: 'success' })}
}
</script>

也可以使用插槽

<template><div><vxe-form v-bind="formOptions" ><template #active><vxe-button status="primary" @click="searchEvent">搜索</vxe-button></template></vxe-form></div>
</template><script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const formOptions = reactive({titleWidth: 100,titleColon: true,titleAlign: 'right',data: {name: 'test1',role: '',nickname: 'Testing',sex: '',age: '',num: '',createDate: '',updateDate: ''},items: [{ field: 'name', title: '名称', span: 12, itemRender: { name: 'VxeInput' } },{ field: 'nickname', title: '昵称', span: 12, itemRender: { name: 'VxeInput' } },{ field: 'role', title: '角色', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'sex', title: '性别', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'age', title: '年龄', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'num', title: '大小', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'createDate', title: '创建时间', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ field: 'updateDate', title: '更新时间', span: 12, folding: true, itemRender: { name: 'VxeInput' } },{ align: 'center', span: 24, collapseNode: true, slots: { default: 'active' } }]
})const searchEvent = () => {VxeUI.modal.message({ content: '搜索', status: 'success' })
}
</script>