小程序选中第三列的元素,第二列常亮,第一列也常亮

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

    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值