vxe-form 大表单拆分在页签中使用
在使用 vxe-from 表单时,可能由于绑定项非常多,这个时候可能就需要将表单进行分类分组,可以泰国片页签的当时进行拆分组。
<template>
<div>
<vxe-tabs v-model="activeTab" height="200">
<vxe-tab-pane title="页签1" name="1">
<vxe-form ref="formRef1" :data="formData" v-bind="formOptions1"></vxe-form>
</vxe-tab-pane>
<vxe-tab-pane title="页签2" name="2">
<vxe-form ref="formRef2" :data="formData" v-bind="formOptions2"></vxe-form>
</vxe-tab-pane>
<vxe-tab-pane title="页签3" name="3">
<vxe-form ref="formRef3" :data="formData" v-bind="formOptions3"></vxe-form>
</vxe-tab-pane>
</vxe-tabs>
<div style="text-align: center;">
<vxe-button>取消</vxe-button>
<vxe-button status="primary" @click="submitEvent">提交</vxe-button>
</div>
</div>
</template>
<script>
import { VxeUI } from 'vxe-pc-ui'
export default {
data () {
const formData = {
name: 'test1',
nickname: '',
sex: '',
age: '',
address: ''
}
const sexItemRender = {
name: 'VxeSelect',
options: [
{ label: '女', value: 'Women' },
{ label: '男', value: 'Man' }
]
}
const formOptions1 = {
rules: {
name: [
{ required: true, content: '必须填写' }
],
nickname: [
{ required: true, content: '必须填写' }
]
},
items: [
{ field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } },
{ field: 'nickname', title: '昵称', span: 24, itemRender: { name: 'VxeInput' } }
]
}
const formOptions2 = {
rules: {
sex: [
{ required: true, content: '必须填写' }
],
age: [
{ required: true, content: '必须填写' }
]
},
items: [
{ field: 'sex', title: '性别', span: 24, itemRender: sexItemRender },
{ field: 'age', title: '年龄', span: 24, itemRender: { name: 'VxeInput' } }
]
}
const formOptions3 = {
rules: {
address: [
{ required: true, content: '必须填写' }
]
},
items: [
{ field: 'address', title: '地址', span: 24, itemRender: { name: 'VxeTextarea' } }
]
}
return {
activeTab: '1',
formData,
formOptions1,
formOptions2,
formOptions3,
sexItemRender
}
},
methods: {
async submitEvent () {
this.activeTab = '1'
await this.$nextTick()
const $form1 = this.$refs.formRef1
if ($form1) {
const errMap = await $form1.validate()
if (errMap) {
return
}
}
this.activeTab = '2'
await this.$nextTick()
const $form2 = this.$refs.formRef2
if ($form2) {
const errMap = await $form2.validate()
if (errMap) {
return
}
}
this.activeTab = '3'
await this.$nextTick()
const $form3 = this.$refs.formRef3
if ($form3) {
const errMap = await $form3.validate()
if (errMap) {
return
}
}
VxeUI.modal.message({ content: '保存成功', status: 'success' })
}
}
}
</script>
分类:
vxe-ui
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章