修改组件el-select默认展示id不展示label

最新推荐文章于 2024-08-22 10:05:57 发布
最新推荐文章于 2024-08-22 10:05:57 发布
阅读量1.6k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/120063226
版权

vue.js javascript html5

项目中有修改组件，点击获取到表单的数据，但是有一个下拉框展示的是id而不是name

看了半天代码，双向绑定和传值都没问题，查了半天资料最后发现是后端传给我的id字段和前端的id类型不同，一个是字符串一个是number，返回的数字和el-option选框里的value值类型对应不上

 

 

解决办法：将v-for遍历的数组中id字段都改成number类型

修改前：

 

修改后：

 

修改后页面正常显示：

 

刘大气
关注
el-select在改变value之后，没有渲染名称，显示的是id
flyaway0624的博客
06-19 1980
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
el-select下拉框内展示el-tree结构
qq_45110882的博客
07-19 2120
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
el-select默认选中 显示的是id 不是汉字
weixin_50899360的博客
08-11 1488
el-select回显 默认选中 显示id
el-select选项值不显示lable值，显示value值
weixin_43916677的博客
09-01 946
00
如何解决select下拉框回显是id的问题
最新发布
m0_71207979的博客
08-22 335
思考：在回显的时候在carlist中找到对应的数据，把manageForm.carEmissionType回显的值变为carList中的value值，再通过a-select-option中对应的label显示不就行了！但是回显的是一个value（是一个id） 试过给接口中的value手动改为label 但是这样的话在不点击时保存给后端穿的就是改变后的label而不是想要的id。这里后端接口只给了个id 点击操作中的编辑 在下面的弹出框中回显。
el-tree-select、el-select 回显name值不对，显示的是id的值（回显应该是name，结果显示id）
qq_39882537的博客
01-22 1413
回显应该是name，结果显示id。
element el-select 默认label展示
josiecici的博客
07-13 1435
效果： 代码： 核心代码： v-model="region"
vue解决el-select下拉框显示ID不显示label问题
goldsmith的博客
03-11 1421
vue解决el-select下拉框显示ID不显示label问题
解决el-table表格下select框数据回显id问题
qq_42241873的博客
09-03 4557
解决el-table表格下select框数据回显id问题 其实之前是有遇到类似问题，但是没有做总结，一时半会儿遇到重复的问题也想不出是什么原因导致的，现在做个总结，提出原因且给出解决方案； 截图只是简单描述一下bug； 之所以更改首条数据会影响到下条数据的id回显或者更改下条数据会影响到首条数据id回显i就是因为它们没有针对当前行的数据去取值和拿值，所以解决方案就是：拿到表格当前行数据，对当前行数据进行数据更新 废话不多说，上代码： <el-table-column label="建议
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
vue中el-select无法显示默认选中值的name，直接显示值value
小白求学进阶
04-18 6923
一、背景 在写项目的过程中，突然发现el-select这个组件，绑定的值没办法显示name，而是直接显示value。在编辑项目的弹框中，要显示项目绑定了哪个数据库（项目外连数据库表主键ID），结果发现直接把关联数据库的ID显示了出来，这与我的设想不一致，因此来找找是什么问题 二、解决 有问题的，有文档的当然第一时间去看文档，一看数据类型是string。 value-key 作为 value 唯一标识的键名，绑定值为对象类型时必填 数据类型strin
详解element-ui中el-select的默认选择项问题
12-29
直接绑定将option中的value值绑定给v-model <template> <div> <el v-model=query> <el v-for=item key=item.value value=item.value label=item.label></el> </el> </div> </template> [removed] export default{ data() { return { options: [{ value: '01',
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
总的来说，本文通过实例代码向读者展示了如何在el-tree组件中利用render函数动态地在每个树节点上生成一个el-button按钮，这一操作涉及到Vue.js的虚拟DOM的概念以及Element UI组件的使用。对于希望在树形控件中添加...
el-select用懒加载，回显时未加载的是数据显示id不显示人名解决办法
weixin_44719702的博客
07-12 2832
el-select用懒加载，回显时未加载的是数据显示id不显示人名解决办法
el-cascader通过jsx方式渲染时，下拉框数据及横向箭头已显示，但是label出不来。
MM_20211102的博客
09-14 533
jsx方式渲染el-cascader组件时，props传递不当，会导致下拉框数据无法显示
关于element-UI的el-select下拉框数据回填显示的id问题
SYXZSs的博客
01-25 8011
关于element-UI的el-select下拉框数据回填显示的id问题 问题如图： 三个form-item都是使用el-selece，但是责任人一栏却显示为id 问题情况 是后台返回的数据类型的原因。 我在接口获取的function里 循环责任人的id，打印类型为number。此时以这样的情况可以判断为id应该属于String类型。 如下图：我使用map更改原数组，使其id转为String再重新赋值给id。整个数组再赋值给空数据，这样再绑定el-select就不会出现数据回填显示id的情况了！
vue使用el-select el-option失效 不显示名称 还是显示原数据
Nothing is impossible to a willing heart.
11-30 814
el-option视图并没有显示名称，还是显示了原数据。
el-select下拉框数据列表没有对应的数据，但后端把没有在下拉框的id数据传过来，导致数据回显时，部分显示不出来，不能回显的数据需要隐藏
weixin_45755709的博客
12-19 896
el-select下拉框数据列表没有对应的数据，但后端把没有在下拉框的id数据传过来，导致数据回显时，部分显示不出来，不能回显的数据需要隐藏
elementUI选择器数据回显问题——展示value而不展示label
weixin_46709512的博客
05-26 1879
问题：elementUI选择器数据回显问题——展示value而不展示label 这种情况下，如果保证逻辑数据都没问题的话，一般是数据类型有问题。 选择器定义的el-option中的value值是number类型，然而我们获取到的数据是string类型 这样会导致我们数据回显时展示的是所谓的value，手动更改选项后又可以正常显示label 以上就是问题的整理与描述解析，如有其他疑惑可在评论区留言~ ...
多个el-select 相加的和控制el-table行数 但是el-select的个数不确定 怎么解决
07-28
要根据多个 el-select 的值来计算 el-table 的行数，但 el-select 的个数不确定，你可以通过监听 el-select 的值变化来实时更新 el-table 的行数。 以下是一个示例的解决方案： 1. 在数据中定义一个数组，用于存储 el-select 组件的选项和对应的值。 2. 使用 v-for 循环遍历数组，在模板中动态生成多个 el-select 组件。 3. 为每个 el-select 组件绑定一个唯一的 key 值，以便 Vue.js 正确地跟踪每个组件的状态。 4. 使用 watch 监听 el-select 值的变化，每当 el-select 值发生改变时，重新计算 el-table 的行数。 5. 更新 el-table 行数后，可以通过 v-if 或 v-show 来控制 el-table 的显示与隐藏。 以下是一个简单的示例代码： ```html <template> <div> <div v-for="item in selectOptions" :key="item.id"> <el-select v-model="item.value" @change="updateTableRows"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" ></el-option> </el-select> </div> <el-table v-if="tableRows.length > 0" :data="tableRows"> <!-- 表格列定义 --> </el-table> <div v-else> No data available. </div> </div> </template> <script> export default { data() { return { selectOptions: [], options: [ { label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }, { label: 'Option 3', value: 3 }, ], tableRows: [], } }, methods: { updateTableRows() { this.tableRows = this.selectOptions.map((item) => item.value) }, }, watch: { selectOptions: { deep: true, handler() { this.updateTableRows() }, }, }, } </script> ``` 在上面的示例中，每当 el-select 的值发生变化时，`updateTableRows` 方法会根据 selectOptions 数组中每个 el-select 的值来更新 tableRows 数组。然后，根据 tableRows 数组的长度来决定 el-table 是否显示。 你可以根据实际需求进行修改和扩展，例如添加默认选项、控制 el-table 的列定义等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值