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;
}
