前端el-option禁止选项回流

最新推荐文章于 2025-05-09 15:52:03 发布
最新推荐文章于 2025-05-09 15:52:03 发布
阅读量788 收藏 5
点赞数 14
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Judith_p/article/details/135215351
本文介绍了如何在后端排序完成后，通过父子组件的传值机制，将最新的阶段状态传递给子组件，以便于控制选项的可填写性。作者详细描述了这个过程并给出了实现效果。

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

提出需求选过的选项（阶段）无法再次填写数据

实现效果如图：

1.首先确定最新阶段，我这里是后端排序完成所以我获取接口的最后一个数组作为禁用选项

2.基于父子组件传值，将laststage传给子组件

3.子组件接收并设置选项

解决elementUI select 的disabled属性设置无效问题一例
10-27 6527
解决elementUI select 的disabled属性设置无效问题一例
IE中Option的disabled无效解决方法
天涯 书塾
01-31 4663
今天在做东西的时候，想到给option项添加disabled的禁用功能，没想到竟然有属性却无效的。。。不过firefox里倒是有效，无奈，IE虽然差劲，但PC毕竟还是微软的天下。。。。还是要适应IE阿。。。网罗了一下资料，发现一个不错的脚本，那来用了下，感觉不错，基本可以跟firefox里的效果媲美了，而且代码也不多代码如下：（为了注重版权问题，这里就没把原注释删除）/**//**
用el-option的disabled属性，控制选择过的选项禁用；应用场景：不允许重复选择
weixin_44462233的博客
01-19 5221
<el-row v-for="(item, index) in FabricCatgList" class="mt15"> <el-col :span="6"> <div> <el-select size="mini" v-model="item.fgidGoodsCatgID" :disabled="IsSupply || !editable"
VUE el-select下拉框动态设置禁用，删除后恢复可选择
Aotman_的博客
05-09 772
点击新增添加按钮，列表table会新增一条包含下拉菜单的数据，如果其中任何一个下拉框选择了某个值，那么新增的下拉菜单的选项中该值是禁用状态，只能选择其他未被选中过的值。点击删除按钮后，已禁用的选项放开，可再次选择。
el-select在选择指定选项(el-option)之前禁用另一个指定选项(el-option)
weixin_48854245的博客
11-11 1743
el-select在选择指定选项(el-option)之前禁用另一个指定选项(el-option)
动态禁用el-select中某个选项
m0_65299760的博客
02-28 2146
【代码】动态禁用el-select中某个选项。
vue el-select 下拉选如何禁用某个 options
weixin_47417181的博客
06-24 4274
vue select 某个下拉禁用
ElementUI el-tree节点编辑与优化：Vue项目中的高级应用
ElementUI的el-tree组件是Vue开发中广泛使用的树形控件，本文对el-tree组件的概述、节点编辑实现原理、实践应用、性能优化、可扩展性与最佳实践进行了系统性的研究。首先介绍了el-tree组件的基础使用方法，包括组件...
【性能提升攻略】：el-data-picker季度区间选择器响应速度优化实战
本文围绕el-data-picker季度区间选择器的性能优化进行全面探讨，介绍了选择器的工作原理，初步识别性能瓶颈，并阐述了前端性能优化的关键理论。通过分析性能监控工具的运用，本文提供了响应速度优化的实用技巧，包括...
【Vue性能优化传奇】：el-select懒加载技术的底层剖析
![【Vue性能优化传奇】：el-select懒加载技术的底层剖析]...随着前端技术的发展，Vue.js作为一套渐进式JavaScript框架，在构建高性能web界面方面得到了广泛的应用。el-select
【性能提升秘诀】：el-select大数据集下的懒加载速成课程
![【性能提升秘诀】：el-select大数据集下的懒加载速成课程]...随着大数据时代的到来，前端组件如el-select在处理
【数据管理艺术】：el-select懒加载技术与性能优化的完美结合
![【数据管理艺术】：el-select懒加载技术与性能优化的完美结合]...本论文探讨了el-select组件中懒加载技术的艺术
el-table中关于el-select下拉选项的禁用
weixin_41897680的博客
04-27 5208
el-table中关于el-select下拉选项的禁用
element中el-option控件的value选项绑定对象以及自定义option
热门推荐
weixin_44092905的博客
01-26 1万+
一.绑定对象 有时候选中el-option中某一个选项的时候，不仅要获取到这个item的item_id，还需要使用到item中保存的其他数据，这个时候就需要，将value绑定的值设置为整个item <el-select v-model="value" value-key="item_id" placeholder="请选择"> <el-option v-for="item in options" :key="item.value"
el-select,el-option下拉选择框
qq_59076775的博客
07-04 7713
下拉菜单的使用
如何自动关闭el-select下拉框
weixin_42987138的博客
08-16 1739
1. 先要监听到页面滚动的区域，我使用了弹窗组件，所以我是在打开弹窗时的方法添加了监听。（formRef 是我给el-form的ref名称，我页面的滚动是写在el-form上，所以要找到这个位置）页面上方的筛选框使用了el-select组件，并且整体页面有滚动条。如打开了下拉框，往下滑动页面时，下拉框则需要自动关闭掉。1.在el-select上添加个ref。通过refs来获取el-select，并且用blur方法关闭掉下拉框。
el-select禁用功能扩展
jl____的博客
05-15 700
el-select置灰扩展
elementui的el-select下拉框 el-option无法选择、绑定的值无法选中
南北极之间
12-22 2841
方法： 在el-select中写一个@change事件
vue的el-select标签全选以及出现需要有禁用选项
diaoshu2256的博客
07-07 3615
首先说一下遇到这种问题的解决思路吧，很简单先去https://element.eleme.cn/#/zh-CN这个官网上找到对应的需求，然后就是拼接数据的问题。 以下是全选的例子： <el-select class="fr" v-model="searchJobType" style="width: 185px; margin-right:8px;" size="m...
el-option选项根据label值设置不同颜色
最新发布
07-12
注意：在Element UI中，selection插槽的作用域参数是一个对象，其中selected表示当前选中的选项对象（即el-option对应的对象）。我们可以通过selected.label来获取选中的label值。 但是，需要注意的是，使用slot=...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值