vue checkbox 实现父选，子全选。子全选，父选。子一个不选，父不选？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2344 天前的主题，其中的信息可能已经有所发展或是发生改变。

有没有类似的案例，或者思路？怎么控制？

checkbox

Vue

选

父

11 条回复 • 2018-06-27 22:03:17 +08:00

Cacivy

2018-06-26 15:44:45 +08:00

computed

lovedebug

2018-06-26 16:20:25 +08:00

父组件传值或者传事件
简单的 computed，watch，eventbus，复杂的 vuex
一个兼职前端的想法😄

CDL

2018-06-26 16:25:30 +08:00

这不叫 checkbox,这叫 tree

oaix

2018-06-26 17:35:08 +08:00

1 楼的方法可以, 注意 computed 支持 setter, 你可以参考下这个 demohttps://jsfiddle.net/eywraw8t/111788/

reginald

2018-06-26 20:22:40 +08:00 via Android

element checkbox 官方文档样例里面有

standbill

2018-06-26 23:21:14 +08:00

http://tianfan.coding.me/deeptodos/
类似这个么？？

Roycom

2018-06-26 23:47:36 +08:00

计算属性应该不难

ericgui

2018-06-27 00:07:37 +08:00

@standbill 牛逼

yantianqi

2018-06-27 11:10:26 +08:00

@standbill 求源码

standbill

2018-06-27 18:16:36 +08:00 via Android

@yantianqi 很久以前做的。回去了找下发给你。😁

standbill

2018-06-27 22:03:17 +08:00 via Android

需要做递归组件。最内层的选框有初始值 v。
大概就是这样。
checked:{

get(){
if(this.children&&this.children.length>0){
return this.children.filter(v=v.checked).length === this.children.length
} else {
return this.v
}
// 或者 every 也行。
}
set(value){
//
if(this.children&&this.children.length>0) {
this.children.forEach(v=>{
v.checked = value
})
} else {
// 最内层了
this.v = value
}
}

}

其他方法也有。
手动写递归赋值什么的，不依靠依赖收集。
还可以用 store 的 getters 返回函数，进行计算属性的依赖收集。