Vue Element UI el-select 回显 v-model 值问题：隐藏没有的选项

"Vue Element UI el-select 回显 v-model 值问题：隐藏没有的选项"\n\n当使用 Element UI 的 el-select 组件进行回显时，如果当前 v-model 的值在选项列表中不存在，则会显示一个数字。为了避免这种情况，可以使用以下两种方法来隐藏没有的选项：\n\n方法一：使用 v-if 或 v-show 隐藏选项\n\nhtml\n<el-select v-model="selectedValue">\n <el-option v-for="item in options" :key="item.value" :value="item.value" v-if="item.value !== selectedValue">\n {{ item.label }}\n </el-option>\n</el-select>\n\n\n在上面的代码中，我们使用 v-if="item.value !== selectedValue" 来判断是否显示 \<el-option\>。如果 item.value 不等于当前的 selectedValue，则显示该选项。\n\n方法二：使用计算属性过滤选项\n\nhtml\n<template>\n <el-select v-model="selectedValue">\n <el-option v-for="item in filteredOptions" :key="item.value" :value="item.value">\n {{ item.label }}\n </el-option>\n </el-select>\n</template>\n\n<script>\n export default {\n data() {\n return {\n selectedValue: '',\n options: [\n { label: 'Option 1', value: '1' },\n { label: 'Option 2', value: '2' },\n { label: 'Option 3', value: '3' }\n ]\n };\n },\n computed: {\n filteredOptions() {\n return this.options.filter(item => item.value !== this.selectedValue);\n }\n }\n };\n</script>\n\n\n在上面的代码中，我们使用了一个计算属性 filteredOptions 来过滤掉不需要显示的选项。在模板中，我们只需要循环渲染 filteredOptions 即可。这样就可以避免不需要显示的选项显示出来。\n\n通过以上两种方法，就可以有效解决 el-select 回显时没有选项显示的问题，并提供更好的用户体验。