因此，我试图在项目中使用扩展面板，并且希望使面板始终聚焦或滚动到新打开的面板中的标题或第一个元素。每次我打开一个新面板时，它都会忽略任何焦点或滚动，而只是停留在由于父容器溢出而导致的滚动位置上。这是我的主意，其中大部分状态都无法显示div和容器：
<template>
<div>
<Synchronizing v-show="loading" />
<div v-show="!loading" class="main">
<Navbar />
<div class="header">
<div class="logo">
<img style="width: 40px" src="" />
</div>
</div>
<div class="description">
<h1>HEADER</h1>
<h2>TEXT</h2>
</div>
<div class="main-container">
<div ref="main-container" class="to-harvest-container">
<v-expansion-panels
:mandatory="true"
:value="expanded"
:accordion="true"
:tile="false"
>
<v-expansion-panel class="panel">
<v-expansion-panel-header @click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label"><LABEL></LABEL></label>
<v-container class="chart-container">
<v-row>
<v-col class="column"
><div v-if="!alerts.to" class="chart">
<doughnut-chart
></doughnut-chart>
</div>
<div v-else>
<div ><h2>TEXT</h2></div>
<div >
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat non perferendis reprehenderit quam, inventore delectus minima quis ratione dolores mollitia sunt iure, praesentium animi, necessitatibus quos aliquid modi dignissimos. Aut?
</p>
</div>
</div></v-col
></v-row
>
</v-container>
<label class="panel-label">LABEL</label>
<v-container class="chart-container">
<v-row v-if="!alerts.lastYear">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table
>
<!-- lots of data -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div class="alert-card">
<div class="alert-card-top"><h2>TEXT</h2></div>
<div class="alert-card-bottom">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet vel commodi harum obcaecati voluptatum ea, repudiandae totam in numquam, illum possimus dignissimos, eum laborum quia nesciunt voluptates soluta esse amet.
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel class="panel">
<v-expansion-panel-header @click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label"
>LABEL</label
>
<v-container class="chart-container">
<v-row v-if="!alerts.lastYear">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table
>
<!-- lots of DATA -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div>
<div ><h2>TEXT</h2></div>
<div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima cumque quidem dignissimos temporibus aperiam consectetur debitis voluptate ratione inventore consequuntur reprehenderit, maxime, optio, tempore rerum ab vel at atque! Ipsum!
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel class="panel">
<v-expansion-panel-header @click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label">LABEL</label>
<v-container class="chart-container">
<v-row>
<v-col class="column" lg="12">
<div>
<div>
<div>
<h3>CONTENT</h3>
<img src="@/assets/images/money-image.svg" alt="" />
</div>
<div class="card-bottom">
<h3>0</h3>
</div>
</div>
<div class="income-card">
<div class="card-top">
<h4>TEXT</h4>
<img src="@/assets/images/money-image.svg" alt="" />
</div>
<div class="card-bottom">
<h3>0</h3>
</div>
</div>
</div>
</v-col>
</v-row>
<v-row v-if="boolean">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table>
<!-- LOTS OF DATA HERE -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div class="alert-card">
<div class="alert-card-top"><h2>TEXT</h2></div>
<div class="alert-card-bottom">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ipsa obcaecati assumenda facilis expedita sunt
id debitis voluptatum in. Quibusdam eveniet asperiores
vitae quisquam perferendis laboriosam cupiditate nisi
repellendus non unde.
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Report",
data() {},
methods: {
logger() {
console.log(this.$refs["main-container"]);
setTimeout(() => {
this.$vuetify.goTo(999);
}, 400);
},
},
};
</script>
<style src="./style.scss" lang="scss" scoped />
我正在尝试使用$ vuetify.goTo API方法，但是它根本没有做任何事情。关于如何制作的任何想法，只要我打开一个新面板，它就会滚动回到该面板的开头？ 非常感谢！