vue使用el-select下拉框匹配不到值的优化方案,el-select显示,当选择框的选项无法与选择框的value值匹配时,不显示value值的处理办法

问题描述:

新建表单数据,下拉框选项一般从接口获取的数据列表,比如后期某个数据关停了,这条数据就会被删除,导致我们取不到这条数据。就会出现 el-select下拉框匹配不到值的情况。所以我们要处理这种情况的。

复现步骤:

  1. 数据字典新增一条【数据项】
  2. 新添加一条工单数据绑定这个新增的【数据项】,提交保存操作。
  3. 保存成功后,删除数据字典新增的【数据项】。
  4. 然后点击当前新添加的工单数据编辑,操作,查看工单数据字典这一项回显否正常。

解决思路:

1:使用数组的 findIndex() 返回值判断编辑当前行数id和下拉列表里的id是否有一样的; 如果有相同id的话,则返回对应索引,如果都不符合条件,则返回 -1 没有查到。

2:如果索引< 0 的话(也就是没查到),就当前行的 selectId 进行赋值操作 selectId = null。这样就处理了以上的情况了。

代码:

 
 

你可能感兴趣的:(项目实操,vue.js,elementui,javascript)