Vue实现单选多选反选全选全不选

已于 2023-09-18 16:48:16 修改
阅读量2.5k 收藏 9
点赞数 1
分类专栏： Vue.js 项目实战经验 文章标签： vue.js javascript html
于 2021-10-09 15:52:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39089928/article/details/120670624
版权
该博客介绍了如何在Vue.js应用中实现单选、多选、反选以及全选全不选的功能。通过使用特定的数据结构和事件处理方法，结合HTML和JavaScript，实现了点击选中和取消选中。文章特别强调了在使用mint-ui的mt-cell-swiper组件进行左滑删除功能时，需使用v-show而非v-if以避免问题。此外，还提供了相关的HTML代码段、数据结构定义、计算属性和方法，以及二级菜单的单选实现。
摘要由CSDN通过智能技术生成

功能：实现点击选中，再点击取消选中，全选，取消全选，左滑删除。

页面效果如下：

左滑删除功能需要用到mint-ui的mt-cell-swiper。

注意使用这个插件的时候不能用v-if，要用v-show，否则无法实现预期效果。

（我在这上面踩了很久的坑，才突然顿悟的） 

需要引入mint相关的js和css

<link rel="stylesheet" type="text/css" href="../css/mint-ui.css" />



                

        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  吴小花的博客
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
Vue如何实现单选、全选、反选

				
			

			

				

					刘杨造梦的博客
				

				

					11-16
					
					2170
					
				

			

		

		

			
				
反选已选择:{{ model }} 总价:{{total}}

			
		

	



                

              
                



	

		

			

				
					
Vue 实现全选、多选、单选效果

				
			

			

				

					chenyajundd的博客
				

				

					08-05
					
					4042
					
				

			

		

		

			
				
假如这里有多个卡片，点击相应卡片之后需要提交卡片内信息，我们需要把点击的卡片筛选出来，在不使用组件库的前提下实现全选，多选，单选操作（其中全选和多选为一个需求，单选为一个需求）

			
		

	



                


  
              

                


	

		

			

				
					
VUE实现全选和单选

				
			

			

				

					Love_yl的专栏
				

				

					07-12
					
					4290
					
				

			

		

		

			
				
效果图：




单选
全部选中








HTML代码：
 <div class="hello">
    <div>
    　　<input type="checkbox" id="allCheck" @click="checkAll" v-model="checkIsAll">
    　　<label for="allCheck">全选</label>
    </div>
    <ul>
    　　&l

			
		

	





	

		

			

				
					
elementPlus-vue3-ts表格单选和双选实现方式

					
最新发布

				
			

			

				

					发渐稀的博客
				

				

					07-06
					
					335
					
				

			

		

		

			
				
记录在vue3、ts、element-plus环境下表格单选和多选的实现方式。

			
		

	



		

			
		



	

		

			

				
					
 vue实现单选多选反选全选全不选

				
			

			

				

					weixin_33802505的博客
				

				

					09-07
					
					1143
					
				

			

		

		

			
				
单选
当我们用v-for渲染一组数据的时候，我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选
<li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'active':''" @click="select(...

			
		

	





	

		

			

				
					
vue实现全选、全不选和部分选择功能

					
热门推荐

				
			

			

				

					Charles_Tian的博客
				

				

					07-24
					
					1万+
					
				

			

		

		

			
				
在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具有价值。

我这里演示后台返回的数据格式如下：


​
{
    data:{
        list:[
            {id:240201,code:'nqctedp80pc8',desc:'推广',typ...

			
		

	





	

		

			

				
					
备用：Dijkstra C++实现

				
			

			

				

					weixin_44182138的博客
				

				

					11-05
					
					825
					
				

			

		

		

			
				
typedef struct{
	int distance, path;
	bool visited;
}Grap;
typedef struct{
	int to, cost;
}Edge;
Grap G[maxn];
vector<Edge> E[maxn];

void Dijkstra(Grap* G, int S, int T)
{
	G[S].distance = 0;
	heap.insert(S);
	while(!heap.empty())
	{
		int V = heap.

			
		

	





	

		

			

				
					
vue实现全选/单选

				
			

			

				

					GUK
				

				

					01-18
					
					502
					
				

			

		

		

			
				
//未开票单选
selectedTap(item, index) {
  if (typeof item.isChecked == 'undefined') {
    this.$set(item, 'isChecked', true);
  } else {
    item.isChecked = !item.isChecked;
  }
  let maxlen = this.notinvoicedList.length;
  let count = 0;
  this.notinvoicedLi.

			
		

	





	

		

			

				
					
vue全选和单选

				
			

			

				

					qq_47243637的博客
				

				

					01-10
					
					405
					
				

			

		

		

			
				
全选和单选

			
		

	





	

		

			

				
					
vue2/3 - 实现列表点击选择及多选 / 全选功能，类似购物车商品列表单选和全选效果功能，vue实现单选和多选功能详细示例教程（详细示例源码，一键复制开箱即用）

				
			

			

				

					高级前端工程师
				

				

					07-27
					
					3959
					
				

			

		

		

			
				
vue列表单选和全选，vue购物车商品勾选和取消，vue列表中的全选和单选怎么做，vue列表中 checkbox 全选 、反选、单选，Vue考试题单选、多选，vue商品购物车列表怎么实现单选和全选，vue实现列表选中与取消，vue全选和单选_vue怎么实现全选单选，vue list列表全选,单选 ,翻页功能，vue实现购物车单选全选，Vue实现图片列表单选或者多选、全选的方法，Vue 单选题组件实现，Vue实现单选多选反选全选全不选，vue3 实现全选/全不选功能，vue 使用vant 的van-check

			
		

	





	

		

			

				
					
vue实现div单选多选功能

				
			

			

				

					10-15
				

			

		

		

			
				
主要为大家详细介绍了vue实现div单选多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
vue实现单选和多选功能

				
			

			

				

					08-29
				

			

		

		

			
				
主要为大家详细介绍了vue实现单选和多选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
el-select 下拉框多选实现全选的实现

				
			

			

				

					10-16
				

			

		

		

			
				
它可以方便地实现单选或多选功能，但在某些场景下，用户需要实现全选功能，即在多选下拉框中可以选择或取消选择所有选项。文章《el-select 下拉框多选实现全选的实现》介绍了两种实现el-select下拉框全选的方法。  ...

			
		

	





	

		

			

				
					
vue+vant-UI框架实现购物车的复选框全选和反选功能

				
			

			

				

					10-16
				

			

		

		

			
				
### Vue+Vant-UI框架实现购物车复选框全选和反选功能  #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...

			
		

	





	

		

			

				
					
Vue实现单选、全选、反选

				
			

			

				

					ScumStudy的博客
				

				

					03-01
					
					4011
					
				

			

		

		

			
				
<template>
  <div>
    <div><input type="checkbox" v-model="checkAll" />全选</div>
    <div><input type="checkbox" @change="inverse" />反选</div>
    <div class="fruit" v-for="(item, index) in fruits" :key="in

			
		

	





	

		

			

				
					
vue实现全选 单选功能

				
			

			

				

					web_1993的博客
				

				

					11-17
					
					3448
					
				

			

		

		

			
				

实现效果



	待选
	
	全选
	单选
	多选
代码

1.页面结构



2.逻辑代码



3.binggo 就这么愉快的完成了

			
		

	





	

		

			

				
					
vue-实现全选单选

				
			

			

				

					weixin_33709219的博客
				

				

					04-25
					
					967
					
				

			

		

		

			
				
在获取列表页面数据时，通过forEach遍历存储数据的对象，给对象中添加一个selected变量，值为布尔值。

点击全选时，通过遍历将对象中selected的布尔值改变


点击单选时，被点中的通过筛选加入到新数组中，通过对比新数组和老数组控制全选是否被选中


转载于:https://www.cnblogs.com/weilizou/p/10770139.html...

			
		

	





	

		

			

				
					
vue - 实现单选和多选

				
			

			

				

					sunshime的博客
				

				

					09-20
					
					785
					
				

			

		

		

			
				
1、效果图：

2、具体实现过程：
<template>
  <div class="demo">
    <div :class="allChecked?'circle-full':'circle'" @click="radio('all')"></div>
    <div class="items" v-for="(item,index)...

			
		

	





	

		

			

				
					
vue select实现多选全选

				
			

			

				

					07-15
				

			

		

		

			
				
要实现Vue Select的多选全选功能，你可以使用以下步骤：

1. 在Vue组件中，使用`v-model`指令将选择的值绑定到一个数据属性上，例如`selectedOptions`。

2. 添加一个全选的复选框，用于选择或取消选择所有选项。你可以使用一个单独的数据属性，例如`selectAll`，来保存全选复选框的状态。

3. 在Vue的模板中，为每个选项添加一个复选框，并将其选择状态与对应的选项绑定。使用`v-model`指令将选中状态绑定到一个临时的`isChecked`属性上。

4. 监听全选复选框的变化，当全选复选框的状态改变时，更新每个选项的选择状态。

下面是一个示例代码：

```html
<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="selectAllOptions">
    <label for="select-all">全选</label>
    <select multiple v-model="selectedOptions">
      <option v-for="option in options" :value="option.value" :key="option.value">
        <input type="checkbox" :value="option.value" v-model="option.isChecked">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: 'option1', isChecked: false },
        { label: '选项2', value: 'option2', isChecked: false },
        { label: '选项3', value: 'option3', isChecked: false },
        // 添加更多选项...
      ],
      selectedOptions: [],
      selectAll: false,
    };
  },
  methods: {
    selectAllOptions() {
      this.options.forEach((option) => {
        option.isChecked = this.selectAll;
      });
      if (this.selectAll) {
        this.selectedOptions = this.options.map((option) => option.value);
      } else {
        this.selectedOptions = [];
      }
    },
  },
};
</script>
```

在上面的示例中，我们使用了一个`options`数组来存储所有的选项。每个选项都有一个`isChecked`属性来表示其选择状态。当全选复选框改变时，我们遍历所有选项并更新它们的选择状态。同时，我们根据选择状态更新`selectedOptions`数组，以便在多选框中显示被选择的选项。

希望这能帮助到你实现Vue Select的多选全选功能！

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
吴小花的博客

			
1分也是爱

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值