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

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

  •  
  •   yantianqi · 27 天前 · 1254 次点击

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

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