【无标题】＜el-select＞下拉框的＜el-option＞

最新推荐文章于 2024-05-16 22:25:50 发布
最新推荐文章于 2024-05-16 22:25:50 发布
阅读量679 收藏
点赞数
文章标签： javascript elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45351558/article/details/122539462
版权
本文探讨了在使用Vue.js和ElementUI时遇到的问题：在下拉框选择过程中，二次选择一级目录会保留次级选择的数据。解决方法是在每次进入组件时清空选中状态。
摘要由CSDN通过智能技术生成

下拉数据的时候

 

 在第二次选中一级目录的时候，会保留次选中的数据，
 

如下图：
 

 

 

 

 
 

 

 <el-col :span="12">
            <el-form-item label="工器具名称" prop="toolName" label-width="100px" style="margin-left: -10px">
              <treeselect

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  你听过我的故事
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
让el-option和el-select宽度保持一致

				
			

			

				

					qq_37635012的博客
				

				

					04-04
					
					2085
					
				

			

		

		

			
				
有时候我们用elementUI时会发现，el-option宽度总是达不到100%，就算你给它设置了宽100%一样不生效。如果 el-select 宽度不确定，可以在 focus 时获取 el-select 宽度，赋值给 el-option。原理：DOM挂载完毕后，获取 el-selcet宽度，并赋值给 el-option。

			
		

	



                

              
                



	

		

			

				
					
Vue + Element-ui的下拉框el-select获取额外参数详解

				
			

			

				

					10-14
				

			

		

		

			
				
 </el-option>  </el-select>  </template> </el-table-column> ```  在上面的例子中，`scope`对象包含了当前行的所有数据，我们可以通过`scope.row`访问到。为了在`changeRole`方法中同时获取选中的值（通过`$event...

			
		

	



                


  
              

                


	

		

			

				
					
el-select,el-option下拉选择框

				
			

			

				

					qq_59076775的博客
				

				

					07-04
					
					6905
					
				

			

		

		

			
				
下拉菜单的使用

			
		

	





	

		

			

				
					
vue+element：el-select和el-option组件和v-for语法，实现下拉列表的数据填充，并且点击下拉列表数据后，另一个表单数据的自动填充

				
			

			

				

					baidu_39557593的博客
				

				

					04-13
					
					1万+
					
				

			

		

		

			
				
1.第一个下拉列表，效果展示





2.第二个下拉列表，效果展示





3.先点击第一个下拉列表，然后第二个下拉列表自动填充，效果展示





4.js请求，后端接口，需要传递的数据格式，对象数组——appointmentUnitRecord_options1：

[ {"label": "培训教室","value": "教学"},
 {"label": "考试大厅", "value": "考试" },
{"label": "共享自习室", "value": "培训" },
{"lab...

			
		

	



		

			
		



	

		

			

				
					
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇_el-option v-for(1)

					
最新发布

				
			

			

				

					2401_85014396的博客
				

				

					05-16
					
					775
					
				

			

		

		

			
				
【代码】el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇_el-option v-for(1)

			
		

	





	

		

			

				
					
循环遍历的el-select，实现el-option对应选中，获取每个下拉框选中的内容

					
热门推荐

				
			

			

				

					wusq的博客
				

				

					10-08
					
					2万+
					
				

			

		

		

			
				
el-select下拉框的个数是根据后台数据动态生成的，所以el-select只写了一个，所有的v-model也只有一个，而且el-option的选项都是相同的，这样就会有一个问题，当选择其中一个下拉框时，其他的下拉框也会被选中同样的数据。



首先想到的办法就是能不能让每个下拉框的v-model变得不一样，也就是说能不能让v-model绑定的数据变成动态的？

我也就是按照这个思路做的

运...

			
		

	





	

		

			

				
					
el-select下拉框或搜索结果（el-option）偏移的解决方法

				
			

			

				

					树上骑个猴的博客
				

				

					01-15
					
					8824
					
				

			

		

		

			
				
/deep/ el-select-dropdown el-popper {
  position: absolute !important;
  top: 30px !important;
  left: 0px !important;
}




			
		

	





	

		

			

				
					
Vue中el-form标签中的自定义el-select下拉框标签功能

				
			

			

				

					10-15
				

			

		

		

			
				
4. **分组选项**：使用`el-option-group` 组件，可以对选项进行分组展示。  在实际开发中，你可能需要结合实际业务逻辑，动态调整`stateArr` 或者使用计算属性来生成更复杂的选项结构。同时，别忘了利用`el-form` 的...

			
		

	





	

		

			

				
					
详解element-ui中el-select的默认选择项问题

				
			

			

				

					10-16
				

			

		

		

			
				
需要注意的是，如果`v-model`的值不在`el-option`的`value`集合中，`el-select`将不会显示任何选项，因为没有匹配的值。为了避免这种情况，我们需要确保所有可能的默认值都存在于`options`中。  此外，`el-select`...

			
		

	





	

		

			

				
					
详细分析Element中的el-select（附代码）

				
			

			

				

					码农研究僧的博客
				

				

					02-29
					
					6388
					
				

			

		

		

			
				
el-select 是 Element UI 中的一个选择器组件，用于提供下拉框选择功能

			
		

	





	

		

			

				
					
element 中el-select 的 el-option的value值为数字

				
			

			

				

					qq_17627195的博客
				

				

					08-06
					
					7058
					
				

			

		

		

			
				
起因：
在使用el-select组件的时候，el-option选项中的label和value的值分别是对应的，但是value的值需要在传参的时候，需要的是数字，不是字符串。
解决方案：
增加 v-bind 或者直接 :value="1"
<el-option label="数字1" :value="1"></el-option>
<el-option label="数字2" :value="2"></el-option>


...

			
		

	





	

		

			

				
					
ElementUI - ＜el-select＞ / ＜el-option＞ 如何选中后返回多个数据 / 整个item

				
			

			

				

					王佳斌
				

				

					06-24
					
					5028
					
				

			

		

		

			
				
前言

<el-select> 组件文档：https://element.eleme.cn/#/zh-CN/component/select

大部分情况下，<el-option> 会配置 lable 属性用于展示，而 value 则是选中后返回的数据。
但是，value 只能返回单个数据，并不能返回多个参数（或整个 item 对象）。
<!-- 只能返回某个数据（item.id） -->
<el-select v-model="selectedDevice"&gt

			
		

	





	

		

			

				
					
el-select实现el-option可编辑

				
			

			

				

					csdnyp的博客
				

				

					07-20
					
					1534
					
				

			

		

		

			
				
核心代码如下，注意el-input不要使用@focus，会导致el-select面板收起来；使用@click.native.stop即可。点击编辑图标对选择项进行修改。鼠标悬浮出现编辑图标。

			
		

	





	

		

			

				
					
【el-select】关于el-option的事件

				
			

			

				

					小钿钿不忘初心的博客
				

				

					03-27
					
					2647
					
				

			

		

		

			
				
1.设置:disable-remote=“false” 来启用el-option的鼠标事件。3.在el-select的change事件后，因为，mouseleave事件的原因，

			
		

	





	

		

			

				
					
el-select 、el-option 常见用法

				
			

			

				

					qq_50853940的博客
				

				

					10-26
					
					1380
					
				

			

		

		

			
				
span style="float: left">{{ item.label }}</span> // 自定义选项样式。{ value: 'option3', label: '选项3' }// value 可以为某一个属性，也可以为对象 如：value = "item"{ value: 'option1', label: '选项1',{ value: 'option2', label: '选项2',//  disabled 禁用效果，某一项显示但不可选择。// 整个选择器禁用。// 启用搜索功能,

			
		

	





	

		

			

				
					
el-select实现与el-option同宽度，且移动端适应自动对齐

				
			

			

				

					一茗道人 ~~ ~ 阿亮-的博客
				

				

					01-10
					
					1895
					
				

			

		

		

			
				
el-select实现与el-option同宽度，且移动端适应自动对齐

			
		

	





	

		

			

				
					
v-model在select和option、el-select和el-option中的使用。（vue使用el-select和el-option实现搜索框）(默认选择数组前四个数据）

				
			

			

				

					qq_56715703的博客
				

				

					07-04
					
					2338
					
				

			

		

		

			
				
单选时，如果v-model表达式的初始值未能匹配任何选项，select元素将被渲染为“未选中”状态。在ios中，会使用户无法选择第一个选项，因为在这样的情况下，ios不会触发change事件。v-model：在表单元素上创建双向数据绑定。v-bind可以把值绑定到Vue实例的一个动态property上，其值可以不是字符串。特点：总是将vue实例的数据作为数据来源—>data中声明的值。其selected的值会根据选择的option的值来变。

			
		

	





	

		

			

				
					
使用el-select属性的值为Int与String类型不匹配时显示直接数字问题

				
			

			

				

					aaaaaaaaa_li的博客
				

				

					01-10
					
					1586
					
				

			

		

		

			
				
使用el-select属性的值为Int与String类型不匹配时显示直接数字问题

			
		

	





	

		

			

				
					
Vue elementui中el-select获取选中label的值

				
			

			

				

					qq_46617584的博客
				

				

					10-27
					
					4602
					
				

			

		

		

			
				
Vue elementui中el-select获取选中label的值

			
		

	





	

		

			

				
					
<el-form-item label="一级审核人员工号" prop="firstStaffNumber">   <el-select v-model="form.firstStaffNumber" clear placeholder="请选择">     <el-option       v-for="item in staffNumber"       :key="item.number"       :label="item.staffName"       :value="item.number">     </el-option>   </el-select> </el-form-item>下拉框选中的值前端无法显现

				
			

			

				

					05-27
				

			

		

		

			
				
<el-select v-model="form.firstStaffNumber" clear placeholder="请选择" @change="updateValue">  <el-option v-for="item in staffNumber" :key="item.number" :label="item.staffName" :value="item.number">  ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值