饿了么el-select设置下拉框内容和选中项内容不一致

近期遇到一个需求点如下图所示：

需求点：

下拉框展示编码和名称，选中后只显示名称

如果按照常规写法，通过label控制，会导致下拉框内容和选中项内容一致。

  <el-select v-model="buDialogData.buCodeDim" size="small">
    <el-option
      v-for="item in buDialogData.buCodeList"
      :key="item.id"
      :label="`${item.buCode} ${item.buName}`"
      :value="item.buCode"
    />
  </el-select>

效果：

解决方法：插槽控制

  <el-select v-model="buDialogData.buCodeDim" size="small">
    <el-option
      v-for="item in buDialogData.buCodeList"
      :key="item.id"
      :label="item.buCode"
      :value="item.buCode"
    >
      <div slot>{{ `${item.buCode} ${item.buName}` }}</div>
    </el-option>
  </el-select>

效果：