Los requisitos son los que se muestran en la siguiente figura, si el contenido de las pestañas electrónicas muestra una barra de desplazamiento después del contenido del cuadro de texto de la tarjeta electrónica y el contenido de la barra de desplazamiento está completo.
La tarjeta electrónica debajo de la pantalla grande es como se muestra en la figura.
Cuando la pantalla se encoge, la tarjeta electrónica también se vuelve más pequeña. En este momento, el contenido excede y se muestra la barra de desplazamiento.
código 1-html
<el-card class="box-card terminal-right-list">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="终端" name="first">
<div>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表<br>
列表11<br>
</div>
</el-tab-pane>
<el-tab-pane label="关联" name="second"
>关联</el-tab-pane
>
</el-tabs>
</el-card>El código 2-css es el siguiente
Para el-card, lo configuro de acuerdo con la pantalla flexible del padre, por lo que el ancho y la altura no son fijos y cambiarán de acuerdo con el tamaño de la ventana del navegador. Esto se puede cambiar de acuerdo con sus propias necesidades, o se puede cambiar a un valor fijo. Si usa flex como yo, se recomienda copiar el siguiente código directamente para lograr
.terminal-right-list {
margin-top: 20px;
flex: 1;
box-sizing: border-box;
::v-deep .el-card__body {
height: 90%;
.el-tabs {
height: 100%;
.el-tabs__content {
height: calc(100% - 52px); /* 减去tab的高度和padding */
overflow: auto; /* 超出部分滚动 */
}
}
}
}Este es el final del artículo, espero que les sea útil~~