vue - 列表顯示(列互相影響，全選控制，更新數據)

要實現的效果為：全選，且列A列B互相影響，列B勾選則列A一定勾選，列A取消勾選，則相應列B取消勾選

數組

vue中列表渲染有些不是響應式的

var list=[
    {
        a:'aaaa',
        b:'ddd'
        A:'1',//勾選
        B:'0'//不勾選
    },
    {
        a:'bbb',
        b:'cccc'
        A:'1',//勾選
        B:'1'//勾選
    },
]

1. 單個數組中的一項更新（更新數據及視圖）
   

 //新增屬性及視圖更新
    var index = 1;
    var item = list[index];
    item.A=1;
    item.B=0;
    this.$set(this.list, index, item);

2.整個數組更新

 //var data = JSON.parse(JSON.stringify(this.list)); //深克隆原數組 一般用於克隆對象
 //var data = Object.assign({}, this.list); //淺拷貝 不起作用
 var data =this.device;//數組直接賦值即可
                    data.forEach(item => {
                        item.a = 1;
                        item.b = 1;
                    });
                    this.list = data;

3.全選
將全選按鈕的數組綁定在vue的computer屬性中

 All() {
            var data = {
                A_all: true, //A全選
                B_all: true //B全選
            };
            this.list.forEach(item => {
                //如果有一個A未勾選，'全選A_all'不勾選
                if (item.A == 0) {
                    data.A_all = false;
                }
                //如果有一個B未勾選，'全選B_all'不勾選
                if (item.B == 0) {
                    data.B_all = false;
                }
            });
            return data;
        }

最后上一下效果圖: