本文介绍如何在 Vue.js 表单中动态控制 下拉框：对新增患者仅显示血缘亲属（如父亲、兄弟），而对已有患者仍保留并显示历史非亲属选项（如同事、朋友），同时视觉上标识其无效性并阻止提交。
本文介绍如何在 vue.js 表单中动态控制 `
在医疗类 Vue 应用中，患者亲属关系（PPRelationOtherCon）需兼顾数据一致性与历史兼容性：新录入患者必须选择有效亲属（如“父亲”“姐姐”），但已存档患者若曾选“朋友”“同事”，该值必须保留可读、可编辑（仅限更新为有效项），不可丢失或强制清空。
✅ 推荐数据模型升级
避免使用模糊的 status: 'I'/'A'（inactive/active），改用语义清晰的布尔字段 isBloodRelated: boolean：
-- 数据库表结构优化示例
ALTER TABLE Relative ADD COLUMN isBloodRelated BOOLEAN DEFAULT TRUE;
UPDATE Relative SET isBloodRelated = FALSE WHERE RELATDESC IN ('friend', 'coworker', 'neighbor');
对应后端返回的 PPrelations 数组将包含 id, desc, isBloodRelated 字段，例如：
[
{ "RELATID": 1, "RELATDESC": "father", "isBloodRelated": true },
{ "RELATID": 11, "RELATDESC": "friend", "isBloodRelated": false }
]
✅ Vue 模板：条件渲染 + 状态区分
核心思路是：始终渲染全部选项（含非亲属），但对新记录禁用非亲属项；对旧记录保留所有项，仅通过样式提示有效性。
<select id="PPRelOtherConType" v-model="PPRelationOtherCon" :disabled="isCreatingNewPatient && !isOptionValidForNew(record)"><option v-for="rel in PPrelations" :key="rel.RELATID" :value="rel.RELATID" :disabled="isCreatingNewPatient && !rel.isBloodRelated">
{{ rel.RELATDESC }}
<template v-if="!rel.isBloodRelated"> (legacy)</template>
</option></select>
其中辅助计算属性定义如下：
computed: {
isCreatingNewPatient() {
// 假设通过 this.patient.id === null 或 this.isNew 标识新记录
return !this.patient.id;
},
isOptionValidForNew() {
return (rel) => rel.isBloodRelated;
}
}
✅ 表单校验：拦截非法提交
在 submit 事件中显式校验，确保新患者不提交非亲属关系：
methods: {
onSubmit() {
if (this.isCreatingNewPatient && !this.selectedRelation?.isBloodRelated) {
this.$message.error('新患者必须选择血缘亲属关系（如父母、兄弟姐妹）');
return;
}
// 继续提交逻辑...
}
}
? 关键细节说明：
- :disabled 绑定在
- 使用 (legacy) 后缀或红色文字（如 {{rel.RELATDESC}} + CSS .legacy { color: #999; font-style: italic; }）直观提示用户该选项已弃用。
- 对于已有患者，即使 isBloodRelated === false，也允许其保留原值并正常提交（仅禁止 新增 时选择），符合业务“只读兼容、写入受限”原则。
✅ 进阶：服务端兜底校验（强烈建议）
前端限制可被绕过，务必在 API 层增加校验：
// 后端伪代码（如 Node.js/Express）
if (req.body.isNewPatient && !validBloodRelations.includes(req.body.relationId)) {
return res.status(400).json({ error: 'Invalid relation for new patient' });
}
通过数据库字段语义化、Vue 动态选项控制、客户端校验 + 服务端强校验三层协同，即可安全、平滑地完成亲属关系选项的渐进式治理——既保障数据质量，又零损迁移历史数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
