element-ui设置高度height属性与style属性设置的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui设置高度height属性与style属性设置的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在element-ui表格中，可以通过style属性和height属性来设置表格的高度。这两种方式的区别如下：

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属性设置表格高度的优点是，可以精确控制表格的高度，避免表格高度不够或者过高的问题。文章来源地址https://www.toymoban.com/news/detail-466029.html

到了这里，关于element-ui设置高度height属性与style属性设置的区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！