解决思路：

如果要对v-for渲染出来的组件进行单独DOM操作，我们可以使用:id标签为元素绑定一个动态的id，这样就能获取到每一个v-for渲染出来的组件的元素，比如为父元素绑定:id="item.departTiltle"，那么就可以通过

         const deptId = event.currentTarget.parentNode.id
         const dataTab = document.querySelector('#'+deptId)
         const dataBar =dataTab.querySelector('.data_bar')
         ...

获取到父元素，以及子元素的值，可以进行后续的单独操作

template代码如下：

   <div class="tab" :class="thisIndex === index ? 'tab_spread' : ''">
                        <!-- 日期导航栏 -->
                        <div class="date_tab" :id="'date_tab_' + item.departTiltle">
                            <div class="left_button" @click="scrollLeft"><van-icon name="arrow-left" /></div>
                            <div class="data_bar">
                                <div class="data_button" v-for="(date, dateIndex) in currentDate" :key="date.day"
                                    @click="dateClick(index, dateIndex)">
                                    <div class="week">{{ date.week }}</div>
                                    <div :class="{ day_active: selectedIndex[index] === dateIndex }" class="day">{{ date.day
                                    }}
                                        <span class="month">{{ date.month }}月</span>
                                    </div>

                                </div>

                            </div>
                            <div class="right_button" @click="scrollRight"><van-icon name="arrow" /></div>
                        </div>