wxml
<view wx:if="{{type=='check'}}" class="box">
<scroll-view class='nav_left' scroll-y='true'>
<block wx:for="{{list}}" wx:key="{{index}}">
<view class="nav_left_items {{item.checked==true?'active':''}} {{curNav==item.id?'active':''}} " bindtap="switchRightTabC" data-index='{{index}}' data-id="{{item.id}}">{{item.name}}</view>
</block>
</scroll-view>
<scroll-view class="nav_right" scroll-y="true">
<!--如果有数据,才遍历项-->
<view wx:if="{{list[curIndex].areaBaseList.length>0}}">
<block wx:for="{{list[curIndex].areaBaseList}}" wx:key="{{index}}">
<view class="nav_right_items {{item.checked==true?'active':''}} {{curNav2==item.id?'active':''}} " bindtap="handletwoC" data-indextwo='{{index}}' data-idtwo="{{item.id}}">
<!--跳转下一级 -->
<text>{{item.name}}</text>
</view>
</block>
</view>
</scroll-view>
<scroll-view class="nav_right_two" scroll-y="true" wx:if="{{list[curIndex].areaBaseList[curIndex2].areaBaseList.length>0}}">
<block wx:for="{{list[curIndex].areaBaseList[curIndex2].areaBaseList}}" wx:key="{{index}}">
<view bindtap="handlethreeC" data-idthree="{{item.id}}" data-indexthree="{{index}}" class="nav_right_items {{item.checked==true?'active':''}} "><text>{{item.name}} </text></view>
</block>
</scroll-view>
</view>
js 先在数据里遍历加入字段checked,和arrayAddress:[ ],checked显示常亮,数组里添加第三列的值,如果有值第二列就常亮
let list = res.data.data;
list.forEach(item => {
item.checked = false;
item.arrayAddress=[];
let itemt = item.areaBaseList;
for (let i = 0; i < itemt.length; i++){
itemt[i].checked = false;
itemt[i].arrayAddress=[];
for (let j = 0; j < itemt[i].areaBaseList.length; j++) {
itemt[i].areaBaseList[j].checked = false;
itemt[i].areaBaseList[j].arrayAddress= []
}
}
});
// 多选
switchRightTabC: function (e) {
let list = this.properties.list;
let id = e.currentTarget.dataset.id,
index = e.currentTarget.dataset.index;
this.setData({
list: list,
curNav: id,
curIndex: index
})
},
handletwoC: function (e) {
let list = this.properties.list;
let id2 = e.currentTarget.dataset.idtwo; //id
let index2 = e.currentTarget.dataset.indextwo; //index
this.setData({
list: list,
curNav2: id2,
curIndex2: index2
})
},
handlethreeC(e) {
let list = this.properties.list;
let id3 = e.currentTarget.dataset.idthree; //id
let index3 = e.currentTarget.dataset.indexthree; //index
list.forEach(item => {
let itemt = item.areaBaseList;
for (let i = 0; i < itemt.length; i++) {
for (let j = 0; j < itemt[i].areaBaseList.length; j++) {
if (itemt[i].areaBaseList[j].id == id3) {
itemt[i].areaBaseList[j].checked = !itemt[i].areaBaseList[j].checked;
// 如果第三列选中,第二列里的arrayAddress数组里添加该元素,如果取消选中,移除该元素
if (itemt[i].areaBaseList[j].checked == true) {
itemt[i].arrayAddress.push({
'id': itemt[i].areaBaseList[j].id,
'parentId': itemt[i].areaBaseList[j].parentId,
'name': itemt[i].areaBaseList[j].name
})
} else {
if (itemt[i].arrayAddress.length > 0) {
itemt[i].arrayAddress.map(function (w, index) {
if (itemt[i].areaBaseList[j].id && w.id == itemt[i].areaBaseList[j].id) {
itemt[i].arrayAddress.splice(index, 1);
}
});
}
}
// 如果第二层数组里有元素,则让它checked为TRUE,从而常亮,如果没有则为false
if (itemt[i].arrayAddress.length > 0) {
itemt[i].checked = true;
} else {
itemt[i].checked = false;
}
// 如果第二层为常亮,则第一层checked为TRUE,常亮,否则为FALSE
if (itemt[i].checked == true) {
item.checked = true;
} else {
item.checked = false;
}
}
}
}
});
this.setData({
list: list,
curNav3: id3,
curIndex3: index3
})
}