element-ui设置高度height属性与style属性设置的区别

`style`属性 设置 表格 高度

&lt;el-table :data="tableData" style="height: 300px;"&gt;
  <!-- 表格内容 --&gt;
</el-table&gt;

这里将表格容器的高度设置为300px，表格的高度是固定的，如果表格内容高度超过了300px，不会出现滚动条，因为默认的overflow为visible ，容不会被修剪，会呈现在元素框之外，所以要加上overflow:auto才会出现滚动条，而且表头会跟着一起滚动。

<el-table :data="tableData" style="height: 300px;overflow: auto;"&gt;
  <!-- 表格内容 --&gt;
</el-table>

height： Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。

使用height属性可以直接设置表格的高度，例如：

复制<el-table :data="tableData" height="300">
  <!-- 表格内容 -->
</el-table>

这里将表格的高度设置为300px，表格的高度是固定的，不会根据表格内容的高度自动调整。当表格的内容超过了表格的高度时会出现滚动条，表头是固定的不会一起滚动。使用height属性设置表格高度的优点是，可以精确控制表格的高度，避免表格高度不够或者过高的问题。

原文地址:https://blog.csdn.net/qq_44732146/article/d eta i ls/130561371

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。