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-itemtitle="名称"field="name"span="12"><template#default="params"><vxe-inputv-model="formData.name"></vxe-input></template></vxe-form-item><vxe-form-itemtitle="昵称"field="nickname"span="12"><template#default="params"><vxe-inputv-model="formData.nickname"></vxe-input></template></vxe-form-item><vxe-form-itemtitle="角色"field="role"span="12"folding><template#default="params"><vxe-inputv-model="formData.role"></vxe-input></template></vxe-form-item><vxe-form-itemtitle="性别"field="sex"span="12"folding><template#default="params"><vxe-inputv-model="formData.sex"></vxe-input></template></vxe-form-item><vxe-form-itemtitle="年龄"field="age"span="12"folding><template#default="params"><vxe-inputv-model="formData.age"></vxe-input></template></vxe-form-item><vxe-form-itemtitle="大小"field="num"span="12"folding><template#default="params"><vxe-inputv-model="formData.num"></vxe-input></template></vxe-form-item><vxe-form-itemtitle="创建时间"field="createDate"span="12"folding><template#default="params"><vxe-inputv-model="formData.createDate"></vxe-input></template></vxe-form-item><vxe-form-itemtitle="更新时间"field="updateDate"span="12"folding><template#default="params"><vxe-inputv-model="formData.updateDate"></vxe-input></template></vxe-form-item><vxe-form-itemalign="center"span="24"collapse-node><template#default><vxe-buttontype="submit"status="primary"content="搜索"></vxe-button></template></vxe-form-item></vxe-form></div></template><scriptsetup>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:''})constchangeEvent=(params)=>{const $form = formRef.value
  if($form){
    $form.updateStatus(params)}}constsubmitEvent=()=>{
  VxeUI.modal.message({content:'保存成功',status:'success'})}</script>

效果如下：

配置式表单也是一样的

<template><div><vxe-formv-bind="formOptions"v-on="formEvents"></vxe-form></div></template><scriptsetup>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-formv-bind="formOptions"><template#active><vxe-buttonstatus="primary"@click="searchEvent">搜索</vxe-button></template></vxe-form></div></template><scriptsetup>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'}}]})constsearchEvent=()=>{
  VxeUI.modal.message({content:'搜索',status:'success'})}</script>

查看 https://github.com/x-extends/vxe-pc-ui
查看码云 https://gitee.com/x-extends/vxe-pc-ui