el-select回显数据，解决el-select回显异常 显示option选项的value 而不是显示label_el-select回显code值

解决el-select回显异常 显示option选项的value 而不是显示label_el-select 回显出value,非数据问题-CSDN博客

【Vue】el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable_el-descriptions-item如何不显示label-CSDN博客 

废话：今天在使用el-select回显数据的时候 出现回显option选项的value 而不是显示label的问题。以为是渲染的问题，试了很多方法 入 this.$set()  this.$forceUpdate()等等都没有解决。

原因：
回显的value和选项value类型不同
form中v-model="form.seriesId"是字符串类型
option中:value="item.id" 选项id是数字类型

解决方法:

1.转int

:value="parseInt(dict.value)"

2.转String

:value="JSON.stringify(item.id)"
 
//简写 ↓
:value="item.id" 改为 :value="item.id+''"（转换成字符串）

字典选择:
<el-select v-model="form.type" placeholder="请选择类型" disabled>
    <el-option
        v-for="dict in dict.type.pro_tenders_type"
        :key="dict.value"
        :label="dict.label"
        //:value="dict.value" 改为下面这行
        :value="parseInt(dict.value)"
   ></el-option>
</el-select>
 
普通下拉：
<el-select v-model="queryParams.dept" placeholder="请选择..." style="width:280px">
	<el-option
	    v-for="item in deptOption"
		:key="item.id"
		:label="item.name"
		//:value="item.id" 改为下面这行
        :value="JSON.stringify(item.id)"
    ></el-option>
</el-select>

<el-form-item :label="系列" prop="seriesId">
  <el-select
          placeholder="请选择"
          clearable
          style="width: 302px"
          multiple
          collapse-tags
          :multiple-limit="5" v-model="form.seriesId" value-key="id" >
    <el-option v-for="item in SeriesList" :key="item.id" :label="item.seriesName"
               :value="item.id+''"/>
  </el-select>
</el-form-item>
 
 
//查询标签接口
        labelQueryByClue(param).then((data) => {
          that.loading = false;
          if (data.data?.code === 10000) {
            that.label.list1 = data.data.obj;
            //回显
            if (obj.labelIds) {
              let arr2 = obj.labelIds.split(",");
              this.form.seriesId = arr2;
            }
          }
        });