vuejs實現樹形checkbox二維數組全選

 

HTML代碼: 

 

<ul v-for="list in rolesMenuList">
<li><input type="checkbox"  :value="list.id" v-model="menusId" @change="CheckChange">{{list.name}}
 <!-- 二級菜單-->
 <ul v-for="val in list.childrens">
    <li><input type="checkbox" :value="val.id" v-model="menusId" @change="CheckChange">{{val.name}}</li>
       </ul>
 </li>
</ul>

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
      }
    }, 
 }

}

 最終效果: