vuejs实现树形checkbox二维数组全选

 

HTML代码: 

 

{{list.name}}
 
 

    
{{val.name}}
       
 

JS代码: 

export default {
  data () {
    return {
       rolesMenuList: [],
       menusId: [],
       checkAll: false
    }
  }

methods: {

    CheckAllChange () {
      const self = this
        let items = []
        // 遍历父级菜单
        items = self.rolesMenuList.map(item => {
          return item.id
        })
        let vals = []
        // 遍历子菜单
        for (var i = 0; i < self.rolesMenuList.length; i++) {
          if (self.rolesMenuList[i].childrens.length > 0) {
            for (var j = 0; j < self.rolesMenuList[i].childrens.length; j++) {
                vals.push(self.rolesMenuList[i].childrens[j])
            }
          }
        }
        vals = vals.map(item => {
          return item.id
        })
        // 两个数组合并
        let Arr = items.concat(vals)
        self.menusId = self.checkAll ? Arr : []
    },
    CheckChange () {
      const self = this 
      // 全选checkbox在勾选的情况下才会赋值
      if (self.checkAll === true) {
        self.checkAll = self.menusId.length === self.rolesMenuList.length
      }
    }, 
 }

}

 最终效果: