el-select 回显显示id

### 解决 `el-select` 组件回显时显示 ID 的问题 当使用 Element UI 或者 Element Plus 中的 `el-select` 组件遇到回显值为 ID 而不是预期的文字描述时，通常是因为绑定到 `v-model` 上的数据类型与实际展示项 (`el-option`) 的数据类型不匹配。 对于这个问题，可以采取两种主要策略来处理： #### 方法一：统一数据类型 确保 `v-model` 和 `el-option` 的 value 属性都采用相同的数据类型。如果原始数据是以字符串形式存储，则应保持一致；如果是数值型则同样对待。例如，在定义选项列表时指定正确的值类型[^2]。 ```html <template> <div> <!-- 性别选择器 --> <el-form ref="form" :model="form" label-width="80px"> <el-row> <el-col :span="6" height="80px"> <el-form-item label="性别"> <el-select v-model="form.sex" placeholder="请选择"> <el-option label="男" :value="1"></el-option> <!-- 使用数字作为value --> <el-option label="女" :value="2"></el-option> <!-- 使用数字作为value --> </el-select> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script setup lang="ts"> import { reactive } from 'vue'; const form = reactive({ sex: '' as string | number, // 初始化为空字符或未选中状态 }); </script> ``` #### 方法二：自定义渲染函数 另一种方法是在模板内添加额外逻辑以支持动态创建带有特定标签的新 `<el-option>` 元素，这适用于那些可能不存在于预设选项中的情况。通过这种方式可以在不影响原有功能的基础上实现特殊需求下的正确回显[^1]。 ```html <template> <div> <el-select v-model="postCode" clearable filterable placeholder="请选择"> <el-option v-for="item in jobList" :key="item.value" :label="item.label" :value="item.value"></el-option> <!-- 动态添加当前选中但不在jobList里的项目 --> <el-option v-if="postCode && !jobList.some((item) => item.value === postCode)" :key="postCode" :label="postName" :value="postCode"></el-option> </el-select> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; // 假定这里有一些初始数据... let jobList = [ /* ... */ ]; let postCode = ref(''); // 当前选中的职位编码 let postName = ''; // 对应的名字或其他描述信息 </script> ``` 这两种方式都可以有效地解决由于不同类型之间的严格相等判断(`===`)所引起的回显失败问题[^3]。具体应用哪种取决于实际情况和个人偏好。