记一次el-select的label不显示问题

最新推荐文章于 2024-02-21 09:04:54 发布
最新推荐文章于 2024-02-21 09:04:54 发布
阅读量1k 收藏
点赞数
分类专栏： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Suk__/article/details/116404731
版权

这里要用visible-change事件记录下拉框当前是打开还是关闭状态,只有打开的时候才进行去重,否则删除层后其他的label会对不上就只显示value了

williamyi74
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-select获取选中的label值.pdf
12-16
首先，`el-select`组件允许我们绑定一个数组作为其选项，每个选项通常包含`value`和`label`两个属性，`value`通常用来作为唯一标识，而`label`则用于显示给用户看的文本内容。在HTML模板中，`el-select`可以通过`v-...
element-plus tree-slelcet 子节点展开没有显示对应文字只显示id
qq_26889291的博客
09-26 1025
在el-tree-select组件加 :render-after-expand="false"属性。
el-tree-select中的编辑回显问题
weixin_45776308的博客
01-05 2080
render-after-expand="false" 属性，才可以进行编辑回显label的值，
vue+elementui 写el-tree时可以获取值但是不能显示解决
m0_61689817的博客
04-03 4678
el-tree
el-tree-select使用的时候，没有出现复选框的问题，解决方案
ctAnnice的博客
05-25 849
在el-tree-select中，v-model绑定的数据是一个数组Array，才能有复选框，不能改变其数据类型。 不过因为后台需要传参为String类型，所以直接用join('')转成了字符串， 就会报 [Vue warn]: <transition-group> children must be keyed: <ElTag>这个错： 解决办法：要用一个新的对象去接，然后：letparams=Object.assign({},this.areaProject...
el-select下拉框只回显value不回显label的原因以及解决方法
m0_63026408的博客
11-16 5616
3：如果 value类型是正确的，下拉框数据也有，还是返显的value，最后可以试一下在el-select加一个change方法中使用this.$forceUpdate()方法如下。el-select的采用的是map的key value结构，因此只显示value而不显示label的原因是，value的类型不正确，将value转换成对应的类型即可。2：如果转换了正确的类型还是返显value而不是label，那么有可能时因为下拉框的数据没有请求出来，因此没有返显相对应的label，
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
详解element-ui中el-select的默认选择项问题
10-16
需要注意的是，如果`v-model`的值不在`el-option`的`value`集合中，`el-select`将不会显示任何选项，因为没有匹配的值。为了避免这种情况，我们需要确保所有可能的默认值都存在于`options`中。 此外，`el-select`...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
el-select数据回显时不显示名称只显示value
u013868665的博客
05-20 4992
1、如题，el-select加载好后，原数据回显却不显示名称，只显示了设置的value，其实到这里应该明白一件事，el-select直接显示value表示select中没有这条数据； 格式如下： <el-select v-model="temp.Id" placeholder="请选择"> <el-option v-for="item in idArray" :key="item.id
vue3中弹框中的el-select下拉组件显示value而不显示label
kanno的博客
10-20 2423
vue3中弹框中的el-select下拉组件显示value而不显示label
vue解决el-select下拉框显示ID不显示label问题
goldsmith的博客
03-11 1345
vue解决el-select下拉框显示ID不显示label问题
如何让elementui el-tree组件 一级节点 复选框不显示
暂时还没想好博客简介
11-09 3721
如何让elementui el-tree组件 一级节点 复选框不显示
elementui-plus el-tree组件数据不显示问题解决
fury的博客
11-07 2005
对比以后发现是template中的#default='{data}'没有写大括号导致的。注意看右侧的树是没有文字的,数据已经渲染,个数是对的,但就是没有文字,
el-select下拉框数据回显不上问题解决
最新发布
dy1717的博客
02-21 1318
拉框数据回显不上问题
vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法
热门推荐
weixin_44900104的博客
08-15 1万+
vue中el-select下拉框 选择后赋值成功 但是下拉选框上不显示选中的值的解决办法
Element Plus treeSelect多选checkbox时，无法展示选中数据
qq_37107602的博客
05-10 1488
在element中，展示tree数据需要按照固定的label/value的形式进行数据渲染，但在实际开发中，后台有固定的的数据格式，无法按照element要求返回，此时可以通过props给后台数据重定义属性名。通过上述方式在开启show-checkbox无法正常展示数据到select框中，此时需要将后端返回的数据的单独处理，去掉props属性！根据业务需要，需要展示一个下拉列表，下拉列表中是Tree级联选择，需要展示复选框。使用Element Plus中的treeselect组件（
Vue3 中el-tree-select使用中遇到的一些问题
一名业余前端的博客
11-29 1077
解决：:render-after-expand="false"一定要加上，否则在value为非一级选择时会出现显示value而非label信息。解决：排查deptTree.data赋值是否赋值成非数值类型。定义的时候注意不要定义成{}，否则也会报错。2、v-model传递进去，input上显示的是value信息，而非label信息。
el-tree节点溢出隐藏显示不完整以及底部滚动条不显示解决办法
qq_59224836的博客
07-09 2325
一般情况下，el-scrollbar包裹住el-tree会出现tree中的节点显示不完整以及下方滚动条显示不全的问题，只需要把以下代码添加进即可。
vue el-select label内容多行展示
05-23
如果 `el-select` 的 `label` 内容过长，可以通过以下两种方法来实现多行展示： 1. 使用 CSS 样式 可以为 `el-select` 组件中的 `el-input` 添加 CSS 样式，实现多行展示。例如： ```html <el-select v-model="selected" placeholder="请选择"> <el-option label="这是一个很长很长很长很长很长很长很长很长很长很长的选项" value="1"></el-option> </el-select> <style> .el-select .el-input { white-space: normal; word-break: break-all; } </style> ``` 2. 使用自定义模板 可以使用 `el-select` 的 `template` 属性来自定义选项模板，以实现多行展示。例如： ```html <el-select v-model="selected" placeholder="请选择" :model-value="optionLabel" :option-label="optionLabel"> <template #option="{ label, value }"> <div class="option-item">{{ label }}</div> </template> <el-option label="这是一个很长很长很长很长很长很长很长很长很长很长的选项" value="1"></el-option> </el-select> <script> export default { data() { return { selected: '', }; }, methods: { optionLabel(option) { return option.label.replace(/(.{8})/g, '$1\n'); }, }, }; </script> <style> .option-item { white-space: pre-wrap; word-break: break-all; } </style> ``` 在这个例子中，我们使用了 `template` 来自定义选项模板，将每个选项的 `label` 内容放在一个 `div` 中，并添加了样式 `white-space: pre-wrap; word-break: break-all;` 来实现多行展示。同时，还需要在 `el-select` 中添加 `:model-value` 和 `:option-label` 属性，来指定选项的显示内容。在本例中，我们通过 `optionLabel` 方法对每个选项的 `label` 内容进行了处理，将其每 8 个字符添加一个换行符，实现多行展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值