博客

前言

想要表格的高度自适应屏幕，保证table能


一屏内展示完。

elementUI的版本：

"element-ui": "^2.14.1",

关键代码：

     <div  style="height: 80vh;">
        <el-table
            style="width: 100%;background: transparent;overflow:auto;"
            v-loading="table.loading"
            height="100%"
            :data="table.data"
          >
          <el-table-column prop="lastLiveView" label="最近30天观看次数" min-width="120">
          </el-table-column>
          <el-table-column prop="yestLiveAvg" label="昨日直播均价" min-width="120">
          </el-table-column>-->
          <el-table-column prop="yestBargainAvg" label="昨日成交均价" min-width="120">
          </el-table-column>
          <el-table-column prop="yestLiveQuantity" label="昨日直播销量" min-width="120">
          </el-table-column>
          <el-table-column prop="yestLiveSales" label="昨日销售额" min-width="120">
          </el-table-column>
          <el-table-column prop="whetherV" label="是否大V" min-width="90">
          </el-table-column>
          <el-table-column prop="syntheticAbility" label="综合能力分" min-width="110">
          </el-table-column>
          <el-table-column prop="serviceScore" label="服务评分" min-width="90">
          </el-table-column>
        </el-table>
      </div>

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

总结：

如果想要table的高度自适应，可以在table组件外面包一层div，设置div的高度为自适应 （单位为 vh 或 clac(100% – 任意数值) 计算），再给el-table组件写上height=”100%”。

另外，当el-table的x、y轴都出现滚动条且表格的背景透明时，表格的右下角会出现一个小白块，如下

css设置如下：

::-webkit-scrollbar-corner{
  background: transparent;
}

如有问题欢迎交流~~！