Vue.js患者表单Select下拉框：新增禁用非亲属选项，编辑保留原值

算力阿峰

2026-7-1

解决方案

核心思路

区分新增和编辑两种状态，动态生成下拉选项列表：

新增患者：仅展示status='A'的家庭类关系
编辑患者：展示所有活跃关系 + 当前患者已绑定的非活跃关系（避免旧值丢失导致空字段）

具体实现

1. 定义状态与数据

在Vue组件的data中添加编辑状态标记，同时保留从后端获取的完整关系数组：

data() {
  return {
    PPrelactions: [], // 从数据库获取的完整Relative表数据
    PPRelationOtherCon: '', // 绑定的选中关系ID
    isEditing: false // 标记当前是否为编辑模式（可通过路由/父组件传入）
  }
}

2. 用计算属性动态过滤选项

通过计算属性根据状态生成适配的选项列表，自动补全编辑时的旧值选项：

computed: {
  filteredRelations() {
    // 第一步：过滤出所有活跃（家庭类）关系
    let filteredList = this.PPrelactions.filter(rel => rel.status === 'A');

    // 第二步：编辑模式下，补全当前已选中的非活跃关系
    if (this.isEditing) {
      // 找到当前绑定值对应的关系对象
      const currentSelectedRel = this.PPrelactions.find(rel => rel.RELATID === this.PPRelationOtherCon);
      // 如果该关系是非活跃且不在过滤列表中，就添加进去
      if (currentSelectedRel && currentSelectedRel.status === 'I' && !filteredList.some(rel => rel.RELATID === currentSelectedRel.RELATID)) {
        filteredList.push(currentSelectedRel);
      }
    }

    return filteredList;
  }
}

3. 修改模板渲染

将原模板中的PPrelations替换为计算属性filteredRelations，同时添加key保证渲染稳定性：

<select id="PPRelOtherConType" v-model="PPRelationOtherCon">
  <option 
    v-for="rel in filteredRelations" 
    :key="rel.RELATID" 
    :value="rel.RELATID"
  >
    {{ rel.RELATDESC }}
  </option>
</select>

问题原因说明

你之前遇到的空字段问题，是因为编辑时原患者选中的是非活跃关系（如friend），但过滤后选项列表中没有该选项，导致<select>无法匹配到对应值，从而显示为空。通过在编辑模式下主动补全当前选中的非活跃关系，就能解决这个问题。

内容的提问来源于stack exchange，提问作者user10191234