element select下拉框回显option中没有的值_elemenet select的值不在option

记录下今天碰到的问题，问题是这样的，有个select下拉框的数据源option依赖于一组数据，然后这组数据可以进行禁用/启用操作，启用之后才能在select框中进行选择。好，问题来了，用户先在下拉框中选了一个值A（{value：20，label: A}），然后又跑去禁用这个数据A，搞得我option中丢掉了这组数据，但是在编辑的时候后端给我返回了之前A对应的值1，然后由于option中没有这个映射关系，我的下拉框就变成了一个孤零零的数字回显在上面，如下图

需求来了，需求方说他要看到那个A，用户要是不修改的话，就保留A，用户要是更改的话，就不能选A

解决方案如下，直接上代码：

 <el-select v-model="Id" placeholder="请选择" clearable filterable style="width: 240px">
                <el-option
                  v-for="dict in list"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
                <el-option v-if="!list.some(list=> list.id === Id)"
                           :label="name"
                           v-model="Id"/>
              </el-select>
 
 
 
 
 
list: [],

list为数据源，从数据库查询出来，直接赋值。

原理大概是这样，给select再设置一个option，触发条件：当绑定的Id在遍历整个option之后都没有找到时；label中绑定的值就是你想显示的值，我这里绑定的是name（从后端查出来的上文中id为20对应的label的值），我们来看一下效果：如下图：

如图，已经可以显示出来了（我这里id20对应的就是‘A’），此时发现A也出现在了下拉框中并且默认选中；如果进行更改操作，例如选了小熊，则A会从下拉框中消失，因为A本就不是option（第一个）中的数据，只有当id跟option中的数据都对不上时，才会显示第二个option，效果如下图：

至此，问题解决，实现select回显option中没有的值。记录一下自己的遇到的问题，如有不对，欢迎指正！