scrollIntoView
// 遍历出来的div
<div
v-for="(item, index) in eventList"
:key="index"
:class="eventId === item.id ? 'selectEvent' : 'eventItem'"
@click="openDetails(item.id, 'left')"
>
<div
class="eventTitle"
:style="eventId === item.id ? 'font-weight: bold;' : ''"
>
{{
item.content.length < 16
? item.content
: item.content.substr(0, 16) + "..."
}}
</div>
<div style="display: flex">
<div class="eventTips">
事件等级 :<span class="eventContent">{{
item.levelName
}}</span>
</div>
<div class="eventTips">
事件类型 :<span
v-if="item.typeName !== null && item.typeName.length < 5"
class="eventContent"
>{{ item.typeName }}</span
>
<el-tooltip
v-else
class="item"
effect="dark"
:content="item.typeName"
placement="top"
>
<span class="eventContent"
>{{
item.typeName ? item.typeName.substring(0, 4) : ""
}}...</span
>
</el-tooltip>
</div>
<div class="eventTips">
上报人员 :<span
v-if="item.reportPerson.length < 5"
class="eventContent"
>{{ item.reportPerson }}</span
>
<el-tooltip
v-else
class="item"
effect="dark"
:content="item.reportPerson"
placement="top"
>
<span class="eventContent"
>{{ item.reportPerson.substring(0, 4) }}...</span
>
</el-tooltip>
</div>
</div>
<div class="eventBottom">
<!-- 左侧列表的 指挥调度 按钮 -->
<span class="eventContent">{{ item.createTime }}上报</span>
<div @click.stop="goDetailsItem(item.id)">
<i class="iconfont if-biaodancaozuo-shenshu" />
指挥调度
</div>
</div>
</div>
看下面这一块就可以了
/* 将可视区外的div移动到可视区范围内 */
this.$nextTick(() => {
let selectEventDom = document.querySelector('.selectEvent')
selectEventDom.scrollIntoView({ behavior: 'smooth' });
})