首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
华为云
V2EX  ›  程序员

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

  •  
  •   yantianqi · 145 天前 · 1707 次点击
    这是一个创建于 145 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    11 回复  |  直到 2018-06-27 22:03:17 +08:00
        1
    Cacivy   145 天前
    computed
        2
    lovedebug   144 天前
    父组件传值或者传事件
    简单的 computed,watch,eventbus,复杂的 vuex
    一个兼职前端的想法😄
        3
    CDL   144 天前
    这不叫 checkbox,这叫 tree
        4
    oaix   144 天前
    1 楼的方法可以, 注意 computed 支持 setter, 你可以参考下这个 demohttps://jsfiddle.net/eywraw8t/111788/
        5
    reginald   144 天前 via Android
    element checkbox 官方文档样例里面有
        6
    standbill   144 天前
        7
    Roycom   144 天前
    计算属性应该不难
        8
    ericgui   144 天前
    @standbill 牛逼
        9
    yantianqi   144 天前
    @standbill 求源码
        10
    standbill   143 天前 via Android
    @yantianqi 很久以前做的。回去了找下发给你。😁
        11
    standbill   143 天前 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 返回函数,进行计算属性的依赖收集。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1977 人在线   最高记录 3821   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 17ms · UTC 08:12 · PVG 16:12 · LAX 00:12 · JFK 03:12
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1