vue实现表单分组

Vue 表单分组实现方法

在 Vue 中实现表单分组可以通过多种方式完成，以下是几种常见的方法：

使用 v-for 动态生成表单组

通过遍历数组动态生成表单分组，适合结构相似的分组场景：

<template>
  <form>
    <div v-for="(group, index) in formGroups" :key="index">
      <h3>{{ group.title }}</h3>
      <input v-model="group.fields.name" placeholder="姓名">
      <input v-model="group.fields.email" placeholder="邮箱">
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formGroups: [
        { title: '基本信息', fields: { name: '', email: '' } },
        { title: '联系信息', fields: { phone: '', address: '' } }
      ]
    }
  }
}
</script>

使用组件封装表单组

将每个表单组封装为独立组件，提高复用性：

<template>
  <form>
    <form-group title="基本信息" v-model="basicInfo"></form-group>
    <form-group title="联系信息" v-model="contactInfo"></form-group>
  </form>
</template>

<script>
import FormGroup from './FormGroup.vue'

export default {
  components: { FormGroup },
  data() {
    return {
      basicInfo: { name: '', age: '' },
      contactInfo: { phone: '', email: '' }
    }
  }
}
</script>

使用 CSS 样式分组

通过 CSS 样式实现视觉分组，适合简单场景：

<template>
  <form class="form-container">
    <div class="form-group">
      <h3>基本信息</h3>
      <input v-model="formData.name" class="form-input">
    </div>
    <div class="form-group">
      <h3>联系信息</h3>
      <input v-model="formData.email" class="form-input">
    </div>
  </form>
</template>

<style>
.form-group {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>

使用第三方库

对于复杂表单场景，可以考虑使用专门的表单库如 VeeValidate 或 Element UI 的表单组件：

<template>
  <el-form>
    <el-form-item label="基本信息" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="联系信息" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { ElForm, ElFormItem, ElInput } from 'element-plus'

export default {
  components: { ElForm, ElFormItem, ElInput },
  data() {
    return { form: { name: '', email: '' } }
  }
}
</script>

表单验证分组实现

对于需要验证的表单分组，可以采用以下模式：

<template>
  <form>
    <div class="form-section">
      <h3>账户信息</h3>
      <input v-model="account.username" @blur="validate('username')">
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      account: { username: '', password: '' },
      errors: {}
    }
  },
  methods: {
    validate(field) {
      if (!this.account[field]) {
        this.errors[field] = '该字段不能为空'
      } else {
        delete this.errors[field]
      }
    }
  }
}
</script>

动态添加/删除表单组

实现可动态增减的表单分组：

<template>
  <div v-for="(item, index) in items" :key="index">
    <input v-model="item.value">
    <button @click="removeItem(index)">删除</button>
  </div>
  <button @click="addItem">添加分组</button>
</template>

<script>
export default {
  data() {
    return { items: [{ value: '' }] }
  },
  methods: {
    addItem() {
      this.items.push({ value: '' })
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

以上方法可根据实际项目需求选择或组合使用，复杂场景建议采用组件化方案或专业表单库。