Vue2 el-select 自定义选中项显示

Vue2 el-select 自定义选中项显示

功能概述

该代码实现了在 Vue2 中，使用 el-select 组件时，选中下拉框选项后在输入框中同时显示 label 和 value。选中项格式为：

北京 (Beijing)

而不是单独显示 label 或 value，并且避免了默认的重复显示问题。

代码实现

代码结构

<template>
  <div>
    <el-select
      v-model="selectedValue"
      placeholder="请选择"
      @change="handleChange"
      clearable>
      <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: [
        { value: 'Beijing', label: '北京' },
        { value: 'Shanghai', label: '上海' },
        { value: 'Nanjing', label: '南京' },
        { value: 'Chengdu', label: '成都' },
        { value: 'Shenzhen', label: '深圳' },
        { value: 'Guangzhou', label: '广州' }
      ],
      selectedValue: '',
    }
  },
  methods: {
    handleChange(value) {
      // 选中后展示 label 和 value 组合
      this.selectedValue = `${value.label} (${value.value})`;
    }
  }
}
</script>

关键功能解析

1. 自定义选中项显示

• 通过 @change 事件监听 el-select 选项的变化。
• handleChange 方法将选中项的 label 和 value 拼接成字符串，并更新到 v-model 绑定的 selectedValue 上。

2. 避免默认重复显示

• 默认情况下，el-select 选中项会在输入框中重复显示 label，并且下拉框选项也会展示 label 和 value。
• 通过在 @change 中将 v-model 绑定的值改为拼接字符串，可以避免重复显示。

3. 动态更新与清空

• 添加了 clearable 属性，可以点击清除按钮，重置选中项，恢复默认占位符 请选择。
• 点击下拉框选项后，输入框动态更新选中的 label (value) 格式。

使用场景

• 适用于需要在下拉框中显示中文 label 和对应英文 value 或编码的场景。
• 常见于地区选择、状态选择等需要中英文或编码对照显示的情况。

代码优点

• 简单直观：逻辑简单，易于理解和维护。
• 灵活性高：可以根据需要自定义选中项的展示格式。
• 避免重影：通过修改 v-model 的值，彻底解决 el-select 默认重复显示问题。

注意事项

• 此代码针对 Vue2 和 Element UI 的 2.x 版本。在 Vue3 版本中，可以使用插槽 #default 实现类似功能。
• 确保选中项的 value 唯一，否则可能导致下拉框选中项匹配异常。