vuejs實現全選功能

jiekechoo 發布于2019-08-22 16:08 / 1398人閱讀

摘要：全選功能開發說明項目使用實現項目提供兩種方式實現全選功能，并附上源碼，共參考方式一方式一，完全發揮了的特性，使用了實現了對單選按鈕的實時監控。

全選功能 開發說明

項目使用 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實現功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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