vue+elementUi+scrollbar+table实现滚动条、overflow、hidden、calc(100vh - 58px)

1、HTML

<template> <el-card class="card"> <div class="scrollbar_box"> <el-scrollbar class="scrollbar"> <el-table :data="tableData" border height="calc(100vh - 590px)"> <el-table-column prop="date" label="日期">  name: "scrollBar", data() { return { tableData: [ { date: "2016-05-03", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, { date: "2016-05-02", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, { date: "2016-05-04", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, { date: "2016-05-01", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, { date: "2016-05-08", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, { date: "2016-05-06", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, { date: "2016-05-07", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, ], }; }, }; 

3、css

注意：calc(100vh - 58px)中的-两头一定要有空格，否则不起作用。

/* 此配置设置了card可视区域的高度，
   设置的时候，尽量不要让屏幕出现滚动条
  （最外层内容不要出现滚动条） 
*/ .card { height: calc(100vh - 58px); } /* 此配置可以设置表格可视区域的高度。
   scrollbar组件无法直接继承card组件的高度，
   所以需要给scrollbar组件定义一个父级，
   并且给父级设置高度，也就是table的可视区域高度 
*/ .scrollbar_box { height: calc(100vh - 590px); } /* 滚动条组件一定要设置百分百 */ .scrollbar { height: 100%; } /* 隐藏纵向和横向滚动条 */ .el-scrollbar__wrap { overflow-x: hidden; overflow-y: hidden; }