一使用div或者其它盒子元素定义一个盒子
<div id="the_right">
<TableData :table_data = 'tableData'></TableData>
</div>
<style>
#the_right{
height: calc(100vh - 62px);
width: calc(100vw - 38vw - 12px);
}
</style>
此时盒子是没有滚动条的
为其添加样式
<style>
#the_right{
height: calc(100vh - 62px);
width: calc(100vw - 38vw - 12px);
overflow-y: scroll;
overflow-x: scroll;
}
</style>
滚动条出现
结论
想要盒子出现滚动条,有三个步骤:
一:给盒子设置宽高
二:给盒子设置overflow样式(overflow-y: scroll; overflow-x: scroll;)。
三:内容宽高度超过,盒子设置的宽高度。
属性解释:overflow-y: scroll;表示当内容高度超过盒子高度时垂直滚动条出现,overflow-x: scroll; 表示当内容宽度超过盒子宽度时横向滚动条出现。