背景： 查询列表，用户名和邮箱混合展示，选中后只展示邮箱前缀，并高亮，保存时传整个信息，回显时展示前缀；

<el-selectv-model="labelForm.notifyUser"clearablemultipleremotefilterablev-scroll="(val) => handleScroll(val)"@visible-change="fouceValue()":remote-method="searchRemote":multiple-limit="5"style="width: 100%"><el-option:class="[labelForm.notifyUser.includes(option.email.split('@')[0]) ? 'selected' : '']"v-for="option in businessOwnerOption":key="option.email":value="option.itemEmail"><template><span>{{`${option.nickName} (${option.email})`}}</span></template></el-option></el-select>

使用插槽的方式实现：

<template><span>{{`${option.nickName} (${option.email})`}}</span></template>

用 class 展示高亮

:class=“[labelForm.notifyUser.includes(option.email.split(‘@’)[0]) ? ‘selected’ : ‘’]”

最多选中个数

:multiple-limit=“5”

:value=“option.itemEmail” 表示展示的值

获取数据后添加 itemEmail， 为展示做准备，并且该数据是脱敏后数据

this.businessOwnerOption.forEach(item => {item.itemEmail = getEncEmail(item.email)
})

保存时做原值处理

data.labelForm.notifyUser = data.labelForm.notifyUser.map(item => {return this.businessOwnerOption.find(el => {return el.itemEmail == item}).email})

数据回显：

回显的数据是原值，需要做脱敏处理，原值展示列表不高亮。

labelForm.notifyUser = labelForm.notifyUser.map(el => {return el.split('@')[0];})

// 邮箱脱敏
export function getEncEmail(str) {let atIndex = str.indexOf("@");let username, domainif (atIndex !== -1) {username = str.substring(0, atIndex);domain = str.substring(atIndex + 1);}return username
}