el-scrollbar设置固定高度，不能超过该高度

要实现这个效果，可以在设置固定高度的同时，使用 `overflow-y: auto` 属性来控制滚动条的出现。这样当内容超过固定高度时，会自动出现滚动条，不会超出该高度。

例如：

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

这里将容器的高度设置为 300px，并设置了 `overflow-y: auto` 属性，这样当容器中的内容超过 300px 时，会自动出现垂直滚动条，不会超出该高度。

相关问题

el-scrollbar 高度自适应

el-scrollbar 是 Element UI 提供的一个滚动条组件，用于在需要滚动内容的容器中添加滚动条。要实现 el-scrollbar 的高度自适应，可以通过以下步骤进行操作：

1. 首先，确保你已经正确引入了 Element UI 的相关组件和样式。

2. 在需要添加滚动条的容器元素上，添加一个固定高度的样式，例如设置一个固定的高度值或者使用百分比来设置高度。

3. 在容器元素内部，使用 el-scrollbar 组件包裹需要滚动的内容。

4. 设置 el-scrollbar 组件的高度为100%。这样 el-scrollbar 组件会根据容器元素的高度自适应，并显示相应的滚动条。

下面是一个示例代码：

<template>
  <div class="container">
    <el-scrollbar style="height: 100%;">
      <!-- 需要滚动的内容 -->
    </el-scrollbar>
  </div>
</template>

<style>
.container {
  height: 300px; /* 设置容器的固定高度 */
}
</style>

这样，el-scrollbar 组件就会根据容器的高度自适应，并在内容溢出时显示滚动条。

el-table与el-scrollbar结合，表头固定不动

可以使用 `el-table` 组件的 `height` 属性来设置表格的高度，然后再结合 `el-scrollbar` 组件来实现滚动条的功能。这样就可以让表头固定不动了。

具体实现方法如下：

1. 在 `el-table` 组件中加入 `height` 属性，并设置为表格的高度，例如：

   <el-table :data="tableData" height="200px">

2. 在 `el-table` 组件外层加入 `el-scrollbar` 组件，例如：

   <el-scrollbar>
     <el-table :data="tableData" height="200px">
       <!-- 表头和表格内容 -->
     </el-table>
   </el-scrollbar>

3. 在 `el-table` 组件中加入 `style` 属性，并设置表头的样式，例如：

   <el-table :data="tableData" height="200px" style="width: 100%">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="age" label="年龄"></el-table-column>
     <!-- 其他表格列 -->
   </el-table>

4. 在 `el-table` 组件中加入 `slot-scope` 属性，并设置 `header` 插槽的样式，例如：

   <el-table :data="tableData" height="200px" style="width: 100%">
     <el-table-column prop="name" label="姓名" slot-scope="{column}">
       <div style="text-align: center">{{ column.label }}</div>
     </el-table-column>
     <el-table-column prop="age" label="年龄" slot-scope="{column}">
       <div style="text-align: center">{{ column.label }}</div>
     </el-table-column>
     <!-- 其他表格列 -->
     <template slot="header">
       <div style="position: sticky; top: 0; z-index: 1; background-color: #fff;">
         <el-table :data="[{}]" style="width: 100%">
           <el-table-column prop="name" label="姓名" header-align="center"></el-table-column>
           <el-table-column prop="age" label="年龄" header-align="center"></el-table-column>
           <!-- 其他表格列 -->
         </el-table>
       </div>
     </template>
   </el-table>

注意，这里使用了一个空数组作为 `el-table` 的数据源，只是为了让表头渲染出来，实际上并不需要显示任何数据。使用 `position: sticky; top: 0;` 让表头固定在顶部，使用 `z-index: 1;` 让表头在滚动时覆盖在表格内容上方，使用 `background-color: #fff;` 让表头背景色为白色，这样就与表格内容区域区分开了。使用 `header-align="center"` 让表头文字居中显示。

最终的代码如下：

<el-scrollbar>
  <el-table :data="tableData" height="200px" style="width: 100%">
    <el-table-column prop="name" label="姓名" slot-scope="{column}">
      <div style="text-align: center">{{ column.label }}</div>
    </el-table-column>
    <el-table-column prop="age" label="年龄" slot-scope="{column}">
      <div style="text-align: center">{{ column.label }}</div>
    </el-table-column>
    <!-- 其他表格列 -->
    <template slot="header">
      <div style="position: sticky; top: 0; z-index: 1; background-color: #fff;">
        <el-table :data="[{}]" style="width: 100%">
          <el-table-column prop="name" label="姓名" header-align="center"></el-table-column>
          <el-table-column prop="age" label="年龄" header-align="center"></el-table-column>
          <!-- 其他表格列 -->
        </el-table>
      </div>
    </template>
  </el-table>
</el-scrollbar>