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


最后上一下效果图: