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;
        }

最后上一下效果图: