在element-ui
表格中,可以通过style
属性和heigh
t属性来设置表格的高度。这两种方式的区别如下:
style
属性设置表格高度
使用style
属性可以设置表格容器的样式,包括高度、宽度、边框等。例如:
<el-table :data="tableData" style="height: 300px;">
<!-- 表格内容 -->
</el-table>
这里将表格容器的高度设置为300px
,表格的高度是固定的,如果表格内容高度超过了300px
,不会出现滚动条,因为默认的overflow
为visible
,容不会被修剪,会呈现在元素框之外,所以要加上overflow:auto
才会出现滚动条,而且表头会跟着一起滚动。
<el-table :data="tableData" style="height: 300px;overflow: auto;">
<!-- 表格内容 -->
</el-table>
height
属性element文档说明
height: Table 的高度,默认为自动高度。如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。
使用height
属性可以直接设置表格的高度,例如:
复制<el-table :data="tableData" height="300">
<!-- 表格内容 -->
</el-table>
这里将表格的高度设置为300px
,表格的高度是固定的,不会根据表格内容的高度自动调整。当表格的内容超过了表格的高度时会出现滚动条,表头是固定的不会一起滚动。使用height属性设置表格高度的优点是,可以精确控制表格的高度,避免表格高度不够或者过高的问题。