VUE2.0+ElementUI2.0表格el-table：高度跟随父标签自适应

在开发中，需要表格控件根据浏览器高度进行调整，固定表头element 文档里面写的是

只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

<template>
  <el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
</el-table>
</template>

其中height="250"是固定值，官方文档里面解释是

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

正常要求是列表页面外部不要滚动条，所以要计算列表高度

image

就像上面这个缩小窗口的时候需要列表自适应，而不是一个固定高度窗口变小的时候出现两个滚动条，网上很多做法是申明一个变量tableHeight，然后根据窗口windos的高度去赋值。然后在watch里面监听窗口变化，这么做也可以，但是性能消耗比较大。

虽然正常使用的时候很少有用户改变窗口的高度，但是如果多次改变的话，那么会一直计算windos窗口的高度，消耗太大了。

我也在网上找了很久，大部分都是这么做的，然后我就想使用height：100%这样的写法去实现，但是element 里面 height="100%"会被换成 height："100px"。

即使我在table 的style里面修改他的height 为其他数值也会因为height="100%" 被改成 height："100px" 但是要固定表头又必须有 height="XXX"这样的写法，后来我观察了一下，应该是height="XXX"这样的写法的优先级会比style里面的优先。

后来想到一个，就是在父标签上面设置一个高度高度根据 calc（100vh -除列表之外其他地方的高度）我直接给table style里面赋值的height 高度为100% !important 不就可以了，最后实现了，上面的需求。

这个应该还是css的基础不牢固。不知道后续会不会有其他的坑，暂时是满足需求的。

代码如下

  <div  style =' height:calc（100vh - 100px)'>   
<el-table
    :data="tableData"
    border
    style="width: 100%" class='tableCss'>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
</el-table>
</div>


<style>
.tableCss{
height: 100% !important;
}
</style>

最后编辑于：2019.06.19 14:33:59