Vxe-Form 表单实战：从基础布局到高级表格化与校验一体化

1. Vxe-Form基础布局实战

第一次接触Vxe-Form时，我被它灵活的布局能力惊艳到了。相比传统表单组件，Vxe-Form通过简单的配置就能实现多种专业级布局效果。先来看最基础的左右布局，这是企业管理系统中最常见的表单样式。

<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({
  data: {
    name: 'test1',
    nickname: 'Testing',
    sex: '',
    age: '',
    address: ''
  },
  items: [
    { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } },
    { field: 'sex', title: '性别', span: 12, itemRender: { name: 'VxeInput' } },
    { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } },
    { field: 'address', title: '地址', span: 24, itemRender: { name: 'VxeTextarea' } },
    { align: 'center', span: 24, itemRender: { 
      name: 'VxeButtonGroup',
      options: [
        { type: 'submit', content: