Element UI el-select多选绑定对象值时标签文本不显示问题

问题现象 #

• 使用el-select多选、远程搜索模式，el-option的value绑定为对象类型，配置value-key="value"作为唯一标识
• 关闭弹窗重新打开时，后端拉取的选项数据已正确赋值，通过Vue Devtools检查v-model绑定值、value-key配置均无异常，但已选的多选标签始终不显示文本
• 当前项目依赖版本：element-ui@^2.13.2、vue@2.6.10，已查阅官方文档、同类问题方案未定位到原因，预期标签可正常展示对应选项文本。

问题相关代码 #

组件实现 #

<el-select
 v-model="defaultFilter.val"
 value-key="value"
 multiple
 size="mini"
 filterable
 remote
 :placeholder="'Aktiv-/Passivfilter Wert für ' + obj.label"
 :remote-method="remoteMethod"
 :loading="configOptions.loading"
>
 <el-option-group v-for="group in configOptions.options" :key="group.label" :label="group.label">
   <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
      <span style="float: left">{{ item.label }}</span>
      <span v-if="item.description" style="padding-left: 5px; color: #8492a6; font-size: 9px">
        {{ item.description }}
      </span>
    </el-option>
  </el-option-group>
</el-select>

绑定value的对象结构 #

{
  "description": "ABC",
  "filterProp": "abc",
  "label": "A B C",
  "value": "ABC"
}

排查方向与解决方法 #

核心逻辑：el-select渲染多选标签时，需要拿当前v-model里的值，和现有渲染的el-option列表做匹配，取匹配项的label作为标签文本。如果匹配时选项列表还没加载完成，或者匹配逻辑没命中，就会直接渲染空标签，且后续选项加载完成后不会自动重新触发匹配更新标签。

按以下优先级逐一排查：

• 优先检查弹窗打开时的逻辑时序
  弹窗如果用v-if控制显隐，打开瞬间v-model绑定的回显值已经存在，但远程选项还在加载中、configOptions.options为空，组件就会渲染空标签。解决方式两种：要么给el-select加v-if="!configOptions.loading"，等选项完全加载完成后再渲染选择器组件；要么调整逻辑顺序，弹窗打开后先拉取选项数据，等选项列表赋值完成后，再给v-model绑定的defaultFilter.val赋回显值，保证组件匹配label时选项已经存在。
• 检查回显值与选项的匹配逻辑
  element-ui 2.13.2版本多选模式绑定对象时存在已知匹配缺陷：即使配置了value-key，如果回显的对象不是从当前configOptions.options列表里取出的同引用对象，哪怕value-key对应的字段值完全一致，也可能匹配失败。回显赋值时不要直接用后端返回的独立对象，等选项加载完成后，从选项列表里筛选出value字段匹配的项，用筛选出的对象给v-model赋值即可。
• 兜底兼容方案
  如果上述调整后仍有问题，最稳妥的方式是把el-option的value绑定为基础类型（即绑定item.value字符串而非整个item对象），需要取完整对象属性时，再根据选中的value值从选项列表里查找对应项，可完全规避对象绑定带来的所有匹配问题。
• 最后检查样式覆盖问题
  排查全局样式是否有对.el-tag__text类名的覆盖，确认不存在display: none、font-size: 0、visibility: hidden、文本色和背景色一致等导致文本不可见的样式设置。

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