Antd 和 Element 的 Table 使其支持高度自适应

前端开发的时候，如果你使用 React 技术栈，会使用 Antd 作为前端 UI 库，Vue 作为其技术栈的话，一般可能会使用 Element UI 作为前端 UI 库。我们在使用这些 UI 库的时候，极大得方便了我们编程，提高了我们的开发效率。但是在使用的时候由于 UI 库的限制，有些功能 UI 库没提供，修改一些内容会不方便。

开发项目的时候，经常会有个需求。Table 的高度不是一个固定的数值而是会变化的，使其和外框的父组件高度自适应，但是又要固定 table 的头部。这里我提供了一个方法仅供参考。

Antd:

<Table className="custom-table" columns={columns} dataSource={dataSource} />

.custom-table {
  height: calc(100% - 100px);
  overflow: auto;
}

.custom-table .ant-table-thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

Element:

.el-table {
  height: calc(100% - 100px);
  overflow: auto; // 替换掉 el-table 本身的 hidden 属性，是得下面的 sticky 生效
  // overflow: unset; // 如果外框使用的是 el-scrollbar，要设置为 unset
}

.el-table__header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1;
}

这里大家可能就能看出，我使用的思路是限制 table 的高度，对 table header 的 position 属性设置为 sticky。因为 table 直接和父组件有接触，所以设置后方便对 table 高度进行自动限制。使用 sticky 属性，是有兼容性问题的，比较老旧的浏览器不支持。

这里这样使用其实有很多方便的用法。比如 Element 没有对外提供，但是其实挺好用的 scrollbar 就方便设置了，能够美化滑动条，如下。

<el-scrollbar
  :native="false"
  wrapClass="scroll-wrapper"
  viewClass="view-box"
>
  <el-table
    :data="apiData"
    stripe
    style="width: 100%"
    size="mini"
  >
    <el-table-column prop="name" label="机构名称" align="center">
    </el-table-column>
    <el-table-column prop="date" label="更新时间" align="center">
    </el-table-column>
    <el-table-column prop="number" label="更新条数" align="center">
    </el-table-column>
    <el-table-column prop="ratio" label="更新比例" align="center">
    </el-table-column>
  </el-table>
</el-scrollbar>