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="日期"> </el-table-column>
          <el-table-column label="配送信息">
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column label="地址">
              <el-table-column prop="province" label="省份"> </el-table-column>
              <el-table-column prop="city" label="市区"> </el-table-column>
              <el-table-column prop="address" label="地址" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="zip" label="邮编"> </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </el-card>
</template>

---

2、JavaScript

export default {
    
    
	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;
}