vuejs实现全选功能

jiekechoo 发布于2019-08-22 16:08 / 1397人阅读

摘要：全选功能开发说明项目使用实现项目提供两种方式实现全选功能，并附上源码，共参考方式一方式一，完全发挥了的特性，使用了实现了对单选按钮的实时监控。

全选功能 开发说明

项目使用 vuejs 实现

项目提供两种方式实现全选功能，并附上源码，共参考

方式一

方式一，完全发挥了 vuejs 的特性，使用了 computed 实现了对单选按钮的实时监控。


    
        
            全选
        
        
            
                {{item.title}}
            
        
    


var list = [
    {
        title : "数据一",
        checked : false,
    },{
        title : "数据二",
        checked : true,
    },{
        title : "数据三",
        checked : true,
    },{
        title : "数据四",
        checked : true,
    },{
        title : "数据五",
        checked : true,
}];

var vm = new Vue({
    el : "#app",
    data:{
        list
    },
    computed:{
        status:{
            get(){
                return this.list.filter( item => item.checked ).length === this.list.length
            },
            set( value ){
                this.list.map(function( item ){
                    item.checked = value;
                    return item;
                });
            }
        }
    }
});

方式二

方式二使用普通的事件监听方式处理数据状态


    
        
        全选
        
            
                {{item.title}}
        
    

var list = [
    {
        title : "数据一",
        checked : false,
    },{
        title : "数据二",
        checked : true,
    },{
        title : "数据三",
        checked : true,
    },{
        title : "数据四",
        checked : true,
    },{
        title : "数据五",
        checked : true,
}];

var vm = new Vue({
    el : "#app",
    data : {
        list,
        status : this.list.filter( item => item.checked ).length === this.list.length ? true : false
    },
    methods : {
        allCheck(){
            this.list.map(function( item ){
                item.checked = this.status;
                return item;
            }.bind(this));
        },
        singleCheck(){
            this.status = this.list.filter( item => item.checked ).length === this.list.length ? true : false
        }
    }
});

说明在方式二中使用了事件监听函数，使用了change，也可以使用 click，使用click事件时，低版本的vuejs存在 bug，高版本中 bug 修复，bug 存在于，在双向绑定状态改变时使用click数据状态后滞后。

云服务器 GPU云服务器全选和反选功能实现WEBRTC功能打赏功能实现 javascript实现功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94085.html

开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 评论0 收藏0
el-select 下拉框多选实现全选

摘要：还是看代码吧。。。部分请选择全选全选部分一一二二三三四四五五全选全选全选全选全选全选看看效果图方法二直接添加一个全选复选框，实现的功能跟方法一是一样的部分请选择全选部分一一二二三三四四五五效果图在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些方法一：下拉项增加一个【全选】，然后应该有以下几种情况：下拉选...

Miyang 2019-08-26 10:30 评论0 收藏0