前言

想要表格的高度自适应屏幕,保证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;
}

如有问题欢迎交流~~!

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐