如何使用Vue实现select下拉框选中选项自动禁用效果

你可以直接通过Vue的响应式属性绑定实现选中项自动禁用，不需要额外编写复杂的事件处理逻辑，核心是给每个<option>绑定disabled状态，判断当前选项值是否等于下拉框的绑定值即可，选中值变化时禁用状态会自动更新。

修改后的代码 #

<select v-model="modalIU.inpIdSpecialitate">
    <option 
        :value='null'
        :disabled="modalIU.inpIdSpecialitate === null"
    >.:: fără legătură specialitate ::.</option>
    <option 
        v-for="item in allSectiiSpecialitati
            .filter(el => el.idSpecialitate !== null)
            .sort((a, b) => a.denumireSpecialitate > b.denumireSpecialitate ? 1 : -1)"  
        :value="item.idSpecialitate"
        :disabled="item.idSpecialitate === modalIU.inpIdSpecialitate"
    >@{{ item.denumireSpecialitate }}</option>
</select>

说明 #

• 实现效果：用户选中任意选项后，当前选中项会自动置为禁用（灰化不可点击），其余选项保持可选，切换选项时上一个选中项会自动恢复可用状态，新选中项自动禁用，符合识别已选内容的需求
• 原代码中绑定的disableEnable()方法如果没有其他业务逻辑需要处理，可以直接移除；如果该方法需要处理其他逻辑，保留即可，不需要在方法内额外维护选项的禁用状态，响应式绑定会自动处理
• 注意：被设置为disabled的选项仅不支持用户手动点击选择，不影响v-model的赋值和选中内容的正常显示

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