vue checkbox 实现父选,子全选。子全选,父选。子一个不选,父不选?

2018-06-26 15:11:01 +08:00
 yantianqi

有没有类似的案例,或者思路?怎么控制?

4219 次点击
所在节点    程序员
11 条回复
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
element checkbox 官方文档样例里面有
standbill
2018-06-26 23:21:14 +08:00
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
@yantianqi 很久以前做的。回去了找下发给你。😁
standbill
2018-06-27 22:03:17 +08:00
需要做递归组件。最内层的 选框有初始值 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 返回函数,进行计算属性的依赖收集。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/465986

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX