解决动态class展示问题

由于部分涉及到隐私，就打马赛克了

比如这个小问题，我有这个动态的class，里面是十几个类似btn的按钮，然后每个btn下面又有子多选框，一开始是我点击那个下面的子级他的父级就被选中，默认选中第一个父级btn的。

现在我需要展示那个下面有选中的多选框他的父级btn就被选中。

所以这句话的，前面的代码是点那个下面的子级他的父级就被选中，后面代码意思是子多选框如果存在选中的子级他父级btn就被选中，但是这样会出现一个问题他还是会默认选中第一个btn。

:class="[{active: item.open_kf_id == formState.staff_ids || selectedStaffIndex.includes(item.open_kf_id)  }]"

解决办法就是给我们的state.formState.staff_ids默认设置成我们第一个存在的值，后期返现个问题在没有state.selectedStaffIndex[0]的时候什么都没有显示了，得加个判断

//设置默认为我们第一个有被选中的btn
      if(state.selectedStaffIndex[0]){
        state.formState.staff_ids = state.selectedStaffIndex[0]
      }

下面是html代码

 <div class="zm-staff-item zm-selected"
          :class="[{active: item.open_kf_id == formState.staff_ids || selectedStaffIndex.includes(item.open_kf_id)  }]"
          v-for="(item,index) in staffs"
          :key="index"
          @click="changeStaff(item)"
          style="margin: 8px 16px 8px 0">
        <img class="zm-staff-avatar" :src="item.channel_logo"/>
        <span class="zm-staff-name">{{ item.channel_name }}</span>
      </div>

下面是逻辑代码

// //来显示btn下面是否有子级被选中
    for(let k in selectedRowKeys.value){
      let selectedStaffIds = selectedRowKeys.value[k].split(":")[0]
      state.selectedStaffIndex.push(selectedStaffIds)
    }
    //设置默认为我们第一个有被选中的btn
    state.formState.staff_ids = state.selectedStaffIndex[0]

为什么要遍历呢？

因为selectedRowKeys.value里面的值是这种形式的，我只需要前面的值即可。

Proxy {0: '1688858438367330:7881299760915111', 1: '1688857379337013:7881302848907550', 2: '1688857785347017:7881303547185489', 3: '1688857785347017:7881303527096379', 4: '1688857785347017:7881303349119228', 5: '1688857785347017:7881300212937189', 6: '1688857785347017:1688856975347519', 7: '1688857785347017:1688854059826920', 8: '1688857785347017:1688852014798866', 9: '1688858346379609:7881302170090986'}
[[Handler]]: Object
[[Target]]: Array(10)
0: "1688858438367330:7881299760915111"
1: "1688857379337013:7881302848907550"
2: "1688857785347017:7881303547185489"
3: "1688857785347017:7881303527096379"
4: "1688857785347017:7881303349119228"
5: "1688857785347017:7881300212937189"
6: "1688857785347017:1688856975347519"
7: "1688857785347017:1688854059826920"
8: "1688857785347017:1688852014798866"
9: "1688858346379609:7881302170090986"
length: 10
[[Prototype]]: Array(0)
[[IsRevoked]]: false