vue实现表单分组

Vue 表单分组实现方法

使用 <fieldset> 和 <legend> 标签 HTML 原生提供 <fieldset> 和 <legend> 标签实现表单分组。在 Vue 中可直接使用这些标签包裹表单元素，通过 CSS 控制样式。

<fieldset>
  <legend>基本信息</legend>
  <input v-model="form.name" placeholder="姓名">
  <input v-model="form.age" placeholder="年龄">
</fieldset>

组件化分组 将每个分组封装为独立组件，通过 props 传递数据和事件。适合复杂表单场景，提高代码复用性。

<template>
  <div class="form-group">
    <h3>{{ title }}</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

动态渲染分组 通过 v-for 动态渲染分组，适合分组结构来自后端或需要灵活配置的场景。

data() {
  return {
    groups: [
      {
        title: '联系方式',
        fields: [
          { model: 'phone', placeholder: '手机号' },
          { model: 'email', placeholder: '邮箱' }
        ]
      }
    ]
  }
}

使用第三方库 Element UI 等库提供现成的表单分组组件。如 Element 的 <el-form-item> 结合 <el-card> 实现。

<el-card>
  <template #header>
    <span>分组标题</span>
  </template>
  <el-form-item label="字段1">
    <el-input v-model="form.field1"></el-input>
  </el-form-item>
</el-card>

状态管理 复杂表单建议使用 Vuex 或 Pinia 管理分组数据状态。各分组组件通过 mapState/mapActions 访问和修改数据。

computed: {
  ...mapState(['formData'])
}

验证分组 结合 VeeValidate 或 Element 的验证规则，可为不同分组设置独立验证规则。

validationSchema: {
  'group1.field1': 'required',
  'group2.field2': 'email'
}

样式隔离 通过 scoped CSS 或 BEM 命名规范确保分组样式不冲突。建议为每个分组添加唯一 class。

.form-group--contact {
  border: 1px solid #eee;
  padding: 15px;
}