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>