el-select在改变value之后，没有渲染名称，显示的是id

最新推荐文章于 2024-08-22 10:05:57 发布
最新推荐文章于 2024-08-22 10:05:57 发布
阅读量1.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flyaway0624/article/details/118051409
版权
当el-select的value改变时，如果option使用v-if，可能会出现只显示id而不显示名称的情况。原因是v-if在初始值为false时不渲染，导致切换后渲染延迟。改用v-show则能避免此问题，因为v-show会始终渲染元素，只是隐藏显示。
摘要由CSDN通过智能技术生成

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="(it
最低0.47元/天 解锁文章
努力的小蜗牛Zzz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-select数据过多懒加载的解决(loadmore)
10-16
如果在分页较大的情况下，用户选中的数据页中没有包含当前的选项，那么在切换到下一页后，可能会出现value显示为对应id的情况。为了避免这种情况，需要在切换分页之前，将选中的id和label保存下来。当组件重新渲染时...
el-select用懒加载，回显时未加载的是数据显示id不显示人名解决办法
weixin_44719702的博客
07-12 2774
el-select用懒加载，回显时未加载的是数据显示id不显示人名解决办法
如何解决select下拉框回显是id的问题
最新发布
m0_71207979的博客
08-22 220
思考：在回显的时候在carlist中找到对应的数据，把manageForm.carEmissionType回显的值变为carList中的value值，再通过a-select-option中对应的label显示不就行了！但是回显的是一个value（是一个id） 试过给接口中的value手动改为label 但是这样的话在不点击时保存给后端穿的就是改变后的label而不是想要的id。这里后端接口只给了个id 点击操作中的编辑 在下面的弹出框中回显。
el-select回显数据，本来应该显示label的值，结果显示的是id值
weixin_45534301的博客
08-17 3216
解决方法：在调基本信息的接口中将回显的数据的数据类型转成数字类型。3）.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。解析一个字符串并返回一个数字。将字符串值乘以1不会改变值，并且默认情况下它会转换为数字。1）.如果是纯数字的字符串，则直接将其转换为数字。2）.如果字符串中有非数字的内容，则转换为NaN。下拉选框调的后端接口，返回的id时数字类型的，回显数据对应的id值是字符串类型的。null --> 数字 0。6.双波浪号 (~~) 运算符。3.使用一元运算符 (+)
el-select的某一项选中后显示id
zhangyu_98的博客
09-22 726
el-select的某一项选中后显示id
el-table中使用el-select选择数据时，选项改变el-table无法渲染的问题
wangzheyifeng的博客
11-01 837
给el-select绑定改变事件 changePackWay() { this.$forceUpdate() const data = this.formData.resList this.formData.resList = [...data] this.random = Math.random() } 转载原文链接
el-tree-select、el-select 回显name值不对，显示的是id的值（回显应该是name，结果显示id）
qq_39882537的博客
01-22 1272
回显应该是name，结果显示id。
Vue Select下拉框控件异常显示id，亲测有效
鸣的博客
04-26 1495
dishList 里面的id和绑定的值dishname字段类型要一致 <template slot-scope="scope" slot="dishNameForm"> <el-select v-model="form.dishName" placeholder="请选择" @change="dishNameChange()" @click.native="selectdishClick()"> <el-option
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
使用el-select时选中值改变但没有渲染变化
luoteen的博客
12-10 3589
在el-select上绑定change方法，使用this.$forceUpdate()强制更新一下select <el-select v-model="value" @change="changeSelect" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.val
关于el-select做分页后切换分页显示id的问题
m0_54882260的博客
10-08 129
刚刚用el-select做项目，数据很多使用了分页，然而当切换分页时，已选中的数据显示为id而不是name,这个地方需要增加romote属性， 还要注意，在加了clearable之后，我的可搜索功能会有点影响，在我搜索字段时，点击清除按钮会清除掉输入的搜索字段，但是当再次点击下拉框时会发现没有拉取全部数据，因为搜索字段虽然在显示上被清掉了，但是在实际代码中并未清除，所以调接口时还会有输入的限...
【element Vue】＜el-select＞回显问题，应该回显 label 却只显示了id
热门推荐
AAAXiaoApple的博客
06-08 1万+
回显问题，应该回显 label 却只显示了id
element-ui中select选择框渲染文字内容但是获取的是列表的id
weixin_45803990的博客
12-29 1794
label表示的是列表渲染的内容，value是change中绑定的值。 <el-select v-model="value" placeholder="请选择" @change="selectChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.id"> </el-opti
【Vue】el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable
guochanof的专栏
08-15 2017
el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable
el-select默认选中 显示的是id 不是汉字
weixin_50899360的博客
08-11 1450
el-select回显 默认选中 显示id
修改组件el-select默认展示id不展示label
m0_47733490的博客
09-02 1659
项目中有修改组件，点击获取到表单的数据，但是有一个下拉框展示的是id而不是name 看了半天代码，双向绑定和传值都没问题，查了半天资料最后发现是后端传给我的id字段和前端的id类型不同，一个是字符串一个是number，返回的数字和el-option选框里的value值类型对应不上 解决办法：将v-for遍历的数组中id字段都改成number类型 修改前： 修改后： 修改后页面正常显示： ...
vue element el-select 渲染失败
xiaoheisboy的博客
04-12 1360
vue element el-select 渲染失败 推荐一个google插件吧 讲起来更方便 Vue.js,平常写项目也可以使用（个人一直在使用） 用法很简单： 在谷歌插件管理（更多工具=》拓展程序）里打开 启动vue项目 就可以在控制台的导航栏里找到Vue了 输入框内输入页面的name就可以查看变量等的变化 解决问题： 在确保自己书写没有问题的情况下，查看v-mode的值是否有成功（可通过Vue插件查看），如果成功绑定但渲染出现问题可通过强制刷新来解决 $forceUpdate（） //强制刷新
el-select里的value和key作用
05-20
在 `el-select` 组件中，`value` 和 `key` 都是用来绑定选项的值的属性。 `value` 属性表示当前选中的值，可以使用 `v-model` 双向绑定来实现选中值的同步更新。 `key` 属性则是用来指定选项对象中作为选项值的属性名，如果不指定 `key`，则默认采用选项对象本身作为选项值。同时，`key` 还可以用于优化 `el-select` 组件的渲染性能，当选项值更新时，如果新旧值的 `key` 相同，则不会重新渲染该选项，从而提升渲染效率。 需要注意的是，`value` 和 `key` 两个属性的作用是不同的，不能混淆使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值