【记录解决问题】--vue select下拉框排除已选择option

背景

同一个options，多个select，后面的select的选项排除前面select选择的内容。

解决方案

收集已选option

const selectedIds = computed(()=> selectedOptions.value.map(item=>item.id));

排除已选option

:options="allOptions.filter(item => !selectedIds.includes(item.id))"

问题

上面的方法会将当前select的value显示为id，实际需要显示label。

最终解决方案

:value="id"
:options="allOptions.filter(item => !selectedIds.filter(a=>a!==id).includes(item.id))"
:fieldNames="{ label: 'name', value: 'id' }"

当前select中，selectedIds过滤掉当前的select的id，即可显示label。