el-select在改变value之后，没有渲染名称，显示的是id_el-select 切换后只渲染id-优快云博客

本文链接：https://blog.youkuaiyun.com/flyaway0624/article/details/118051409

当el-select的value改变时，如果option使用v-if，可能会出现只显示id而不显示名称的情况。原因是v-if在初始值为false时不渲染，导致切换后渲染延迟。改用v-show则能避免此问题，因为v-show会始终渲染元素，只是隐藏显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.这里是因为下拉框里option使用了v-if来显示是否显示该选项

 <el-select v-if="ruleForm.mergerToSelect!=='3'" filterable remote :remote-method="remoteMethod" :loading="loading" v-model="ruleForm.mergerToSelectId" v-el-select-loadmore="handleLoadmore" :placeholder="langs.choice" style="width:100%;" @change="getTipStr">
  <el-option v-if="ruleForm.mergerToSelect==='1'" :label="langs.autoCustomer" value="0"></el-option>
  <el-option v-if="ruleForm.mergerToSelect==='4'" :label="langs.autoSupplier" value="-1"></el-option>
  <el-option v-if="ruleForm.mergerToSelect==='2'" :label="langs.autoContacts" value="-2"></el-option>
  <el-option v-for="(item,index) in mergerToTargetList" :key="index" :label="item.name" :value="item.id" :title="item.name" style="width: 215px;">
</el-select>

2.初始化的时候默认显示ruleForm.mergerToSelect==='1'的这个选项

3.然后切换到ruleForm.mergerToSelect==='2'，页面中选择框显示的是-2，刚开始以为是没有触发变更的问题，使用了$forceUpdate，是没有效果的

4.后来使用了v-show，居然就好了

--------------------------------------------------------

总结：所以就去查了一下v-if和v-show的区别，猜测是因为v-if当初始化的值为false的时候是不进行渲染的，等到变成true的时候才渲染，然而渲染也有时间差，所以导致名称没有显示出来，而v-show是初始化的时候不管是true false都会去渲染，所以不会出现问题

附详细说明链接：https://blog.youkuaiyun.com/ning0_o/article/details/56006528