vue3后台管理 el-select 启用远程搜索，删除输入的数据，重新选择依然出现上次模糊搜索的对应数据

最新推荐文章于 2023-12-09 10:26:31 发布
最新推荐文章于 2023-12-09 10:26:31 发布
阅读量549 收藏 1
点赞数
文章标签： android vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64715294/article/details/132087646
版权

问题描述

（1）分配对象选择供货商家，负责人模糊搜索下拉出现对应商家。删除输入的数据，点击请选择依然出现上次模糊搜索的对应商家

（2）输入没有的商家，删除所输入的数据，点击请选择出现全部商家

 

 

 
 

 
 

原因分析：
 

 
 
el-select添加filterable属性即可启用搜索功能 鼠标移除再移入依然是上次搜索的数据
 

 

 

解决方案：
 

1.更换组件使用 el autocomplete
 

2.添加:filter-method ：自定义筛选方式
 

 

 

 
 

 
 


                

        

        

    




    

      

        

            

              
                
                  守灯者
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
el-select-tree:ElementUI的el-select与el-tree结合

				
			

			

				

					05-07
				

			

		

		

			
				
精选树
ElementUI的el-select与el-tree结合在一起。
 在线示例
用法
安装
npm install --save el-select-tree
需要element-ui
 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示：
 import 'el-select-tree/lib/element-ui' ;
全球注册
import Vue from 'vue' ;
import ElSelectTree from 'el-select-tree' ;
Vue . use ( ElSelectTree ) ;
组件内注册
import ElSelectTree from 'el-select-tree' ;
export default {
  components : {
    ElSelectTree
  }
} ;
完

			
		

	



                

              
                



	

		

			

				
					
vue+elementui实现下拉表格多选+搜索

				
			

			

				

					weixin_43787161的博客
				

				

					11-24
					
					5336
					
				

			

		

		

			
				
template
<el-select 
	v-model="dataForm.processDefinitionId" 
	placeholder="请选择" 
	@change="handselect" 
	ref="select"
	@click.native="deptogglePanel($event)" 
	multiple 
	collapse-tags 
	size="medium">
		<el-option 
		v-for="(item,index) in proce

			
		

	



                


  
              

                


	

		

			

				
					
关于ElementUI，avue等vue的框架的select远程搜索数据回显以及视图更新问题

				
			

			

				

					qq_40682410的博客
				

				

					04-07
					
					5127
					
				

			

		

		

			
				
场景就是，我用avue的项目，想用组件写远程搜索，结果发现写了:dicUrl=”。。。。“，组件不识别，调不到接口，于是用,但是远程搜索又出现了问题：我第一次搜索，选中之后的数据可以正常显示，但是当我第二次搜索并选中时，第一次搜索之后选中的值就变成id了，查了查说是饿了么的bug，要更新版本才可以，但因为我们项目是avue的，avue里集成了elementui，只更新elementui是不好用的（已经尝试过），于是想着更新avue，但是avue我们太久不更新了，所以更新会发生很多奇奇怪怪的事情（有小伙伴更过

			
		

	





	

		

			

				
					
vue3使用element-plus搭建后台管理系统---菜单管理

				
			

			

				

					07-01
				

			

		

		

			
				
vue3使用element-plus搭建后台管理系统---菜单管理

			
		

	



		

			
		



	

		

			

				
					
vue-search-select-可搜索的选择组件和语义UI的下拉列表兼容。-Vue.js开发

				
			

			

				

					05-27
				

			

		

		

			
				
vue-search-select一个没有依赖性的Vue.js搜索选择组件。
从https://github.com/Semantic-Org版本2.x借用CSS支持Vue.js vue-search-select一个Vue.js搜索选择组件，没有依赖项。
从https://github.com/Semantic-Org版本2.x借用CSS支持Vue.js 2.x五种选择组件ModelSelect（从v2.3.8起）通过v-model设置的值可以是字符串，数字，布尔值和对象如果v模型的类型为string，则onInput由string设置。
（不是选项对象）通过v-model设置的ModelListSelect（来自v2.3.8）可以将自定义列表和自定义显示文本传递给Component Wrap ModelSelect co



			
		

	





	

		

			

				
					
elementUI远程下拉搜索框清空后,选项里面还存留着上次的搜索结果

				
			

			

				

					qq_41943624的博客
				

				

					06-30
					
					954
					
				

			

		

		

			
				
加上elementUI自带的clear方法和visible-change方法。elementUI下拉搜索框清空后,选项里面还存留着上次的搜索结果。

			
		

	





	

		

			

				
					
vue中 弹框关闭时清空数据 再次点开数据存在bug

				
			

			

				

					qqtang1406722832的博客
				

				

					07-30
					
					1820
					
				

			

		

		

			
				
vue项目弹框关闭时再次打开输入仍然存在bug

			
		

	





	

		

			

				
					
ElementUI el-cascader级联选择器显示上次选中数据回显

				
			

			

				

					qq_52337177的博客
				

				

					01-03
					
					1937
					
				

			

		

		

			
				
ElementUI el-cascader级联选择器显示上次选中数据回显

			
		

	





	

		

			

				
					
el-select下拉框多选远程搜索反显

				
			

			

				

					qq_38210427的博客
				

				

					07-26
					
					550
					
				

			

		

		

			
				
【代码】el-select下拉框多选远程搜索反显。

			
		

	





	

		

			

				
					
element ui中的选择器el-select怎样做到在选择了一个选项后自动清空输入框，即不需要回显？

				
			

			

				

					applo10的专栏
				

				

					12-09
					
					777
					
				

			

		

		

			
				
el-select怎样做到在选择了一个选项后自动清空输入框，即不需要回显？

			
		

	





	

		

			

				
					
Vue: 多个el-select不能重复选择相同属性

					
最新发布

				
			

			

				

					02-22
				

			

		

		

			
				
例子：多个el-select不能重复选择相同属性

			
		

	





	

		

			

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

				
			

			

				

					10-14
				

			

		

		

			
				
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
基于Vue el-autocomplete 实现类似百度搜索框功能

				
			

			

				

					10-16
				

			

		

		

			
				
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

			
		

	





	

		

			

				
					
解决vue elementUI 使用el-select 时 change事件的触发问题

				
			

			

				

					01-18
				

			

		

		

			
				
<el v-model=level size=mini placeholder=请选择 change=selectChange()>  <el v-for=item key=item.value label=item.label value=item.value></el>  </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面...

			
		

	





	

		

			

				
					
vue:el-input输入时限制输入的类型操作

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
vue el-table前端 file-saver 导出excel可导出分页数据.zip

				
			

			

				

					12-11
				

			

		

		

			
				
亲测 vue el-table前端使用file-saver组件，导出excel ,可导出分页数据，里面有详细步骤

			
		

	





	

		

			

				
					
vue-next-select:Vue 3的选择解决方案

				
			

			

				

					03-28
				

			

		

		

			
				
vue-next-select 文献资料 贡献 提出拉取请求之前，请务必先阅读。  # build package yarn build # run linter yarn lint # run tests yarn test

			
		

	





	

		

			

				
					
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本

			
		

	





	

		

			

				
					
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件

				
			

			

				

					05-10
				

			

		

		

			
				
树选择 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build

			
		

	





	

		

			

				
					
Vue3+ElementUI el-select 下拉框多选,下拉框里回显多选的数据

				
			

			

				

					06-10
				

			

		

		

			
				
对于Vue3和ElementUI的el-select下拉框多选，你可以通过以下步骤来回显多选的数据：

1. 在data中定义一个数组selectedOptions，用于存储选择的多个选项的值。

2. 在el-select的v-model绑定selectedOptions数组，实现多选功能。

3. 设置el-select的multiple属性为true，启用多选模式。

4. 在el-option的v-model绑定selectedOptions数组，表示该选项是否被选中。

5. 在mounted生命周期函数中初始化selectedOptions数组，将需要回显的多选项的值添加到该数组中。

以下是示例代码：

```html
<template>
  <el-select
    v-model="selectedOptions"
    multiple
    placeholder="请选择"
    style="width: 200px;">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :selected="selectedOptions.indexOf(item.value) > -1">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 存储选择的多个选项的值
      options: [ // 下拉框选项
        { value: 'option1', label: '选项一' },
        { value: 'option2', label: '选项二' },
        { value: 'option3', label: '选项三' },
        { value: 'option4', label: '选项四' }
      ]
    };
  },
  mounted() {
    // 初始化selectedOptions数组，将需要回显的多选项的值添加到该数组中
    this.selectedOptions = ['option1', 'option2'];
  }
};
</script>
```

在上述代码中，我们使用selectedOptions数组来存储选择的多个选项的值，然后在el-select的v-model中绑定该数组，实现多选功能。我们还设置了el-select的multiple属性为true，启用多选模式。在el-option中，我们使用v-model绑定selectedOptions数组，表示该选项是否被选中。在mounted生命周期函数中，我们初始化selectedOptions数组，将需要回显的多选项的值添加到该数组中。这样，下拉框就可以回显多选的数据了。

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
守灯者

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值