ElementUI 间距;element ui如何设置表格的高度

在ElementUI项目开发中，遇到间距调整和表格高度设置的问题时，我们有多种解决方案。对于间距问题，可以通过自定义样式类或直接修改组件默认样式来实现；而表格高度设置则主要依赖于el-table组件的属性配置。

开头简述解决方案

针对这两个问题，我们可以采用以下方式解决：
- 对于间距：通过CSS样式控制，或者使用ElementUI内置的布局工具如el-row和el-col的gutter属性
- 对于表格高度：可以使用height或max-height属性来限定表格高度，也可以结合el-scrollbar实现滚动效果

一、ElementUI间距调整

使用CSS样式
可以为元素添加自定义样式类，在样式类中定义margin或padding来调整间距。
```html

.item {
margin: 10px;
padding: 5px;
}

</p>

<ol start="2">
<li>使用ElementUI布局组件
 ElementUI提供了<code>el-row和el-col用于布局管理，其中el-row的gutter属性可以方便地设置列间距。
html
<el-row :gutter="20">
<el-col :span="12">左侧内容</el-col>
<el-col :span="12">右侧内容</el-col>
</el-row>



二、ElementUI表格高度设置


固定高度
 直接给el-table设置height属性即可让表格固定高度，并自动显示滚动条。
html
<el-table :data="tableData" height="250">
<!-- 表格列定义 -->
</el-table>

高度限制
 如果需要设置高度，可以使用max-height属性。
html
<el-table :data="tableData" max-height="300">
<!-- 表格列定义 -->
</el-table>

动态计算高度
 在某些场景下，表格高度需要根据浏览器窗口大小动态调整。这时可以监听窗口大小变化事件，并相应调整表格高度。
```html






export default {
  data() {
    return {
      tableHeight: window.innerHeight - 200 // 根据实际情况调整
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.tableHeight = window.innerHeight - 200
    }
  }
}