el-select 选中的值与展示的不一样

最新推荐文章于 2026-03-12 10:02:46 发布

原创最新推荐文章于 2026-03-12 10:02:46 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何在前端使用ElementUI的el-select组件实现一个可搜索、多选且只显示邮箱前缀的列表，同时对选中的邮箱进行高亮和脱敏处理。选中时仅显示脱敏后的邮箱前缀，保存时处理原始值，回显时则对原始数据进行脱敏展示。

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

<el-select
            v-model="labelForm.notifyUser"
            clearable
            multiple
            remote
            filterable
            v-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, domain
	if (atIndex !== -1) {
		 username = str.substring(0, atIndex);
		 domain = str.substring(atIndex + 1);
	}
	return username
}