写在前面

如果我们只是单纯的用card组件展示一些简单的内容，Element UI 官方提供的原生属性已经足够了。
假设一下，用card展示一个长内容，header固定在页面顶部放标题或描述，footer固定在页面底部放操作按钮，中间展示内容，内容超出可视区域自动显示滚动条，应该是最好的体验了吧。

card 和 table 都可以通过设置固定高度实现滚动条。但是采用flex布局填充剩余空间之后，无法显示滚动条。

card

card 是 Element UI 组件库中的一个卡片组件，常用于展示内容块，支持自定义标题、内容、操作区等。

基本用法

通过 el-card 标签包裹内容即可创建一个基础卡片。默认带有阴影效果和边框。

<el-card>
  <div>卡片内容</div>
</el-card>
 

添加标题

使用header插槽或header属性定义卡片标题。

<el-card>
  <div>卡片内容</div>
</el-card>
 

卡片操作区

在 footer 插槽中添加操作按钮或其他交互元素。

<el-card>
  <div>卡片内容</div>
  <template #footer>
    <el-button type="primary">操作按钮</el-button>
  </template>
</el-card>
 

完整示例

下面的代码展示了card组件的使用，包含完整的头、尾、内容展示

<template>
  <el-card>
    <template #header>
      <div>
        <h1>The Header</h1>
      </div>
    </template>
    <div>
       <div v-for="i in 30" :key="i">
           {{ i }} - 这里是一些示例文本。
       </div>
    </div>
    <template #footer>
      <div>
        <h1>The Footer</h1>
      </div>
    </template>
  </el-card>
</template>

Card填充剩余空间时展示滚动条

其实用el-container组件（el-container、el-header、el-main、el-footer）或者 html 的 div + css 很容易实现上述的效果。这里只针对使用card组件实现该效果。

<template>
	<div>
    <h1>This is an about page</h1>
  </div>
  <el-card class="flex-card">
    <template #header>
      <div>
        <h1>The Header</h1>
      </div>
    </template>
    <div class="table-container">
       <div>
            <div v-for="i in 30" :key="i">
               {{ i }} - 这里是一些示例文本。
            </div>
          </div>
    </div>

    <template #footer>
      <div>
        <h1>The Footer</h1>
      </div>
    </template>
  </el-card>
</template>


<style scoped>
.flex-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-card :deep(.el-card__body) {
  flex: 1;
  overflow: auto;
}

.table-container {
  height: 100px;
}
</style>

父组件使用flex布局，card使用flex-1填充父组件的剩余空间。
:deep穿透子组件，设置card操作区的布局
.table-container{
height:100px;
}
.table-container这个是最重要的了，作为一个二把刀我也不知其所以然，高度设置小于card组件高度的值，里面的内容会自动填充空间。也可以之间设置0px;界面小于设置的高度之后，就会挤压footer了。

效果图

大模型搜索了很多都不起作用，诸如.el-card__body设置height:100%，el-card通过height：100%占满剩余高度。

操作区想放个el-table的，但是发现滚动之后看不到表头。有待验证el-table是否可以像card一样通过某种样式实现滚动的效果。