精华内容
下载资源
问答
  • Vue实现全选反选功能

    千次阅读 2018-04-28 13:35:34
    2、定义一个空数组B,把请求到的数据赋值给这个数组。...3、判断A和B的长度是否相等来实现全选反选。 下面贴出全部代码 <template> <div> <input type='checkbox' class='input...

    整体思路:1、点击一个单选框,记录当前的下标,存入数组A中。

                     2、定义一个空数组B,把请求到的数据赋值给这个数组。

                     3、判断A和B的长度是否相等来实现全选和反选。

    下面贴出全部代码

    <template>
    	<div>
    		<input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选
    		<ul v-for='checkb in checkboxData'>
    			<li>
    				<input type='checkbox' name='checkboxinput' class='input-checkbox' 
        v-model='checkboxModel' :value='checkb.id'>{{checkb.value}}
    			</li>
    		</ul>
    	</div>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				checkboxData: [{
    					id: '1',
    					value: '苹果'
    				}, {
    					id: '2',
    					value: '荔枝'
    				}, {
    					id: '3',
    					value: '香蕉'
    				}, {
    					id: '4',
    					value: '火龙果'
    				}],
    				checkboxModel: [],
    				checked: ""
    			}
    		},
    		methods: {
    			checkedAll: function() {
    				var _this = this;
    				if(this.checked) { //实现反选
    					_this.checkboxModel = [];
    				} else { //实现全选
    					_this.checkboxModel = [];
    					_this.checkboxData.forEach(function(item) {
    						_this.checkboxModel.push(item.id);
    					});
    				}
    			}
    		},
    		watch: { //深度 watcher
    			'checkboxModel': {
    				handler: function(val, oldVal) {
    					if(this.checkboxModel.length === this.checkboxData.length) {
    						this.checked = true;
    					} else {
    						this.checked = false;
    					}
    				},
    				deep: true
    			}
    		},
    
    	}
    </script>

     

    展开全文
  • vue实现全选反选功能

    千次阅读 2018-11-03 14:24:58
    vue脚手架搭建的项目里做的 &lt;template&gt; &lt;div class="user"&gt; &lt;div&gt;&lt;input type="checkbox" v-model="checkAll" @click="...

    vue脚手架搭建的项目里做的

    <template>
    <div class="user">
      <div><input type="checkbox" v-model="checkAll" @click="check(checkAll)">全选</div>
      <ul v-for="item in list" v-bind:key="item.name">
        <li><input type="checkbox" v-model="item.isCheck"><span>{{item.name}}</span></li>
      </ul>
        </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          checkAll: '',
          list: [
            {name: 'jack', isCheck: false},
            {name: 'rose', isCheck: false},
            {name: 'mike', isCheck: false}
          ]
        }
      },
      methods: {
        check (data) {
          let _this = this
          if (!data) {
            _this.list.forEach(function (item) {
              item.isCheck = true
            })
          } else if (data) {
            _this.list.forEach(function (item) {
              item.isCheck = false
            })
          }
        }
      },
      watch: {
        list: {
          handler (value) {
            let _this = this
            let count = 0
            for (let i = 0; i < value.length; i++) {
              if (value[i].isCheck === true) {
                count++
              }
            }
            if (count === value.length) {
              _this.checkAll = true
            } else {
              _this.checkAll = false
            }
          },
          deep: true
        }
      }
    
    }
    </script>
    <style>
      .el-main{
        line-height: 60px;
      }
      li{
        list-style: none;
      }
    </style>
    
    
    展开全文
  • 最近做的项目用到了全选全不选功能,于是我就自己动手写了一个,基于vue使用监听实现全选反选功能,具体实例代码大家参考下本
  • 本文实例为大家分享了vue实现全选反选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> </...
  • vue中,经常会遇到类似于全选与反选的功能,这里列举几个实现全选反选的几种方法

    在遇到类似于全选与反选的功能,可以从勾选数来判断,也可以从勾选框是否全勾选,这里以vue为基础,列举几个实现全选反选的几种方法;

    <div class="list">
          <div class="footer">
            <input type="checkbox" v-model="allSelected"></input>
          </div>
          <p v-for="(value,index) in list">
            <input type="checkbox" v-model="value.checked"></input>
            <span>{{value.title}}</span>
          </p>
    </div>
    export default {
      name: 'app',
      data(){
        return {
          list:[
            {title:'vue',checked:false},
            {title:'html',checked:false},
            {title:'css',checked:false},
            {title:'javascript',checked:false},
          ],
        }
      },
    }

    方法一:用的是reduce方法,用该方法遍历数组累加计算,计算出勾选数,比对勾选数是否和数组长度相等,从而判断是否全选;

      computed:{
        //勾选的个数
        selectedCount(){
          return this.list.reduce((pre,cur)=>pre+(cur.checked?1:0),0);
        },
        //全选与反选
        allSelected:{
          get(){
            return this.selectedCount==this.list.length&&this.list.length>0;
          },
          set(isCheck){
            this.list.forEach(t=>{
              t.checked=isCheck;
            })
          }
        }
      },

    这里也可以用for…of循环遍历计算勾选数量,只是用reduce会更让代码更简洁些。

    computed:{
        //勾选的个数
        selectedCount(){
          let num=0;
          for(let x of this.list){
            x.checked?num+=1:num+=0;
          }
          return num;
        }
    }

    方法二:用every方法,该方法判断数组里的每个checked值是否都为true,如果都为true,则返回true,否则返回false;

      computed:{
        allSelected:{
          get(){
            return this.list.every(i => {
               return i.checked;
            })
          },
          set(isCheck) {
            this.list.forEach(t=>{
              t.checked=isCheck;
            });
          }
        }
      },

    方法三:通过方法二变换一下,用some方法。当有一个checked值为false时,则返回true,然后直接返回一个取反值。在全选反选的例子里,实用性不如every方法强,但这也算是一种变换思维的解决方法;

      computed:{
        allSelected:{
          get(){
            const isAll=this.list.some(i => {
               return !i.checked;
            });
            return !isAll;
          },
          set(isCheck) {
            this.list.forEach(t=>{
              t.checked=isCheck;
            });
          }
        }
      },

     

    展开全文
  • 主要为大家详细介绍了vue实现全选反选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一般需要用到全选反选的示例比如:购物车,批量添加,批量删除等  //需要用到的变量 itemList: [], // 商品列表 totalPrice: 0, //商品总价格 isCheckAll: false, //全选的checkbox是否选中 isChecked: ...

    一般需要用到全选和反选的示例比如:购物车,批量添加,批量删除等

     //需要用到的变量
    
    itemList: [], // 商品列表
    
    totalPrice: 0, //商品总价格
    
    isCheckAll: false, //全选的checkbox是否选中
    
    isChecked: false, //某个checkbox是否选中
    
    checkedIdList: [], //选中的商品的id组合
    
    checkedItemList: [] //选中的商品的列表组合
    //全选input
    <tr>
        <td>
            <div>
                <input type="checkbox" :checked="isCheckAll" @click="checkAll($event)">
                <span>全选</span>
            </div>
        </td>
    </tr>
    
    //单选的input
    <tr v-for="item in itemList" :key="item.id">
        <td>
            <input :checked="item.isChecked" type="checkbox" @click="checkOne($event, item.id)">
        </td>
    </tr>
    
    /全选
    checkAll(e) {
        let checkAllItem = e.target;
        this.checkedIdList = [];
        this.checkedItemList = [];
        if (checkAllItem.checked) {
            for (let item of this.itemList) {
                item.isChecked = true;
                this.checkedIdList.push(item.id);
                this.checkedItemList.push(item);
                this.totalPrice += Number(item.price);
            }
            this.isCheckAll = true;
        } else {
            for (let item of this.itemList) {
                item.isChecked = false;
            }
            this.totalPrice = 0;
            this.isCheckAll = false;
            this.checkedIdList = [];
            this.checkedItemList = [];
        }
    },
    //单选
    checkOne(e, id){
        let checkOneItem = e.target;
        if(checkOneItem.checked == true){
            for(let item of this.itemList){
                if(item.id == id){
                    this.checkedIdList.push(item.id)
                    this.checkedItemList.push(item)
                    item.isChecked = true
                }
            }
            if(this.itemList.length == this.checkedIdList.length){
                this.isCheckAll = true;
            }
        }else {
            for(let item of this.itemList){
                if(item.id == id){
                    item.isChecked = false;
                    let index = this.checkedIdList.indexOf(id)
                    this.checkedIdList.splice(index, 1)
                    this.checkedItemList.splice(index, 1)
                }
            }
            this.isCheckAll = false
        }
    }

     

    展开全文
  • Vue实现全选反选

    2020-09-28 10:12:32
    Vue实现搜索功能 思路 // 全选反选思路 //首先给全选按钮写一个点击事件,绑定一个变量默认为false, //创建一个空的数组,在循环里面用v-model绑定,在用:value=id或者下标; //在全选点击事件中,if判断当按钮为...
  • vue中使用ref属性进行全选反选功能实现 vue中给我们提供了一种操作DOM的方属性:ref。绑定在DOM元素上的时候,和id差不多,通过(this.$refs来调用)。 下面就是就是我用vue写的全选(反选)功能的一个小案例: <...
  • 导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图:如果网上搜的话,搜的是一堆带children的 ,那种是遍历tree的...
  • 主要为大家详细介绍了vue实现简单全选反选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近用vue做了两个项目,都需要实现全选反选功能,所以想着记录下分享给大家,方便自己或者有需要的朋友们参考讲学习,所以下面这篇文章主要介绍了利用Vue.js实现checkbox的全选反选效果,需要的朋友可以一起来学习...
  • 一、在做项目的时候有一个列表图片需要实现全选反选以及单选的功能,如下效果: 这里基于vue+vant来实现的,代码如下: <template> <div class="punch-picture-wrapper"> <div class="punch-...
  • vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中了一个,那么父级...
  • 导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图:如果网上搜的话,搜的是一堆带children的 ,那种是遍历tree的...
  • 反选" class="diff-choose" @click="rechoose()" /> (keyword)" :key="item.id" class="clearFloat"> (item.id)" /> <span>{{item.id}} : {{item.name}} 删除" @click="del(item.id)">删除 编辑" @click=...
  • vue+elementui实现el-select全选 反选

    千次阅读 2020-06-12 14:12:25
    #vue实现el-el-select多选全选 反选 实现的功能: 1、 多选 2、 选择【全选】时多选数据及反选 3、 数据全部勾选时【全选】勾选,全选情况下去除一个选项【全选消失】 <el-select v-model="orgData" size=...
  • v-bind 只能实现数据的单项绑定 v-model 可以实现数据的双向绑定 v-model只能运用在表单元素当中 input(text 、 radio 、 checkbox 、) 、select 、textarea demo1栗子:简易计算器的实现: 效果图展示: 代码...
  • 效果如图 这里是ant-design-vue table组件 详情见文档 重点 左侧勾选框 你需要配置 :row-selection="rowSelection...这样就完成全选功能了 重点是上图 如何将数据的id拿出来存到新数组arr里 然后赋值 其实也没啥 ...
  • 主要介绍了vue+vant-UI框架实现购物车的复选框全选反选功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 这是一个在vue里使用jquery完成全选反选功能 template代码: <div class="cart-check-all"> <input type=“checkbox” name=“checkAll” id=“checkAll” v-model=“checkedAll” @click=“checkAll...
  • 最近做了两个vue的项目,都需要实现全选反选功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便。下面就来介绍如何利用指令来实现全选。
  • 在有些项目中会出现,select与checkbox的结合体,有的时候还需要全选反选功能,效果如下: 代码如下: <template> <div style="font-size: 14px; width: 50%;margin: 0 auto;"> <p>选择的...
  • 关于在Vue中监听复选框按钮点击实现其他复选框的全选反选功能 最近找到了一个实习工作,在项目中遇到了这个问题,看了elementui官方文档和百度了一些资料,最后结合起来实现了这个功能,话不多说直接看代码 首先是...

空空如也

空空如也

1 2 3 4
收藏数 80
精华内容 32
关键字:

vue实现全选反选功能

vue 订阅