uniapp或VUE 嵌套的對象數組 渲染多個自定義的多選框

數據結構

 

 

 就是兩層嵌套的對象數組 name作為  每一次層的標題

<view v-for="(i,index) in assitantList" :key='index'>
                <view class="titles">{{i.organization_name}}</view>
                <view class="box">
                    <view :class="item.ischeck==true?'active':''" :data-i="index" :data-ii="indexs" @tap='change' v-for="(item,indexs) in i.children"
                     :key="indexs" class="assistant">
                     <view :class="item.ischeck==true?'actives':''" class="activestatus" :data-i="indexs" :data-ii="index" style=""></view>
                     {{item.real_name}}
                     </view>
                </view>
</view>

js

// 修改數據源 添加 ischeck屬性 默認值為false
this.assitantList = res.data
var obj = JSON.parse(JSON.stringify(res.data))
obj.forEach(x => {
    x.children.forEach(y => {
        y.ischeck = false
    })
    })
console.log(obj)
this.assitantList = obj

點擊事件 

change(e) {
    var  ee = e.currentTarget.dataset.ii
    var  yy = e.currentTarget.dataset.i
    let selarr = [...this.selarr];
    if(this.assitantList[yy].children[ee].ischeck == false){
       this.assitantList[yy].children[ee].ischeck = true
       selarr.push(this.assitantList[yy].children[ee].real_name)
    }else{
        this.assitantList[yy].children[ee].ischeck = false
        selarr = selarr.filter(item=> item !=this.assitantList[yy].children[ee].real_name)
    }
　　　　// 最終選中的數組
        this.selarr = selarr
    },