Vue 3 中合同条款动态增删的核心是用 reactive 数组管理结构化条款对象，支持独立校验、富文本编辑、父子嵌套及提交回显。
Vue 3 中实现合同条款的动态增删，核心是把“条款”抽象为可配置的数据项，用响应式数组管理，配合表单验证与结构化渲染。不依赖硬编码字段，而是让每一条款具备独立生命周期和校验能力。
用 reactive 数组管理条款列表
每条合同条款是一个对象，包含内容、类型（如“付款条款”“违约责任”）、是否启用、排序序号等。用 reactive 声明主数据，确保响应式更新：
- 定义初始结构：
const clauses = reactive([{ id: Date.now(), content: '', type: 'general', enabled: true, sort: 1 }]) - 新增条款时 push 新对象，并自动分配唯一
id和递增sort - 删除时用
clauses.splice(index, 1)，避免直接赋值导致响应丢失
每行独立表单 + 动态校验规则
条款不是简单文本输入，常需多字段组合（如“触发条件+执行动作+时限”）。推荐为每条条款包裹一个 <el-form-item>，并绑定独立规则：
- 在
v-for="(clause, i) in clauses"中，为每个clause设置专属校验规则对象，例如：{ content: [{ required: true, message: '条款内容不能为空' }] } - 使用
:prop="'clauses.' + i + '.content'"精准关联字段与规则，避免全局校验冲突 - 支持富文本编辑器（如 Tiptap）或带格式的 textarea，提升法律文本表达力
支持嵌套结构：条款分组与子条款
真实合同中常有“主条款→子条款”层级（如“第3条 保密义务”下含“3.1 信息范围”“3.2 期限”）。可用递归组件或扁平化 + parentId 字段实现：
立即学习“前端免费学习笔记（深入）”；
- 数据结构中增加
parentId和level字段，区分层级关系 - 渲染时按
level缩进，用v-if="!clause.parentId"渲染顶层，再用v-for查找其子项 - 新增子条款时，自动继承父级
parentId和计算新sort，保持逻辑连贯
提交前合并与回显处理
提交时需将动态条款转为后端接受的格式（如数组或带编号的 JSON）；回显时要精准还原结构，避免引用丢失：
- 提交前用
clauses.filter(c => c.enabled)过滤禁用项，再 map 成标准字段结构 - 回显时用
Object.assign(clauses, serverData)或clauses.splice(0, clauses.length, ...serverData)替换整个数组，保留响应式引用 - 若服务端返回的是扁平列表（含 parent_id），前端需做一次树形转换再赋值
