dg-table+el-table【表格+分页】---css自适应高度+滚动条（拓展calc()函数）

缩放浏览器，表格+分页依旧正常展示，如下图所示：

图片中涉及到 左侧的dg-table（封装过的el-table）、右侧的el-table 两种类型的样式设置

由于本篇是使用了position定位来处理的，所以先要了解：

Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动
简单的定位实现过程

给想要自适应高度的div设置position:absolute;top:0;left:0;right:0;bottom:0;(具体距离设置看情况设定)

.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 90%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}

二、我对代码进行的修改

html
那个按钮为什么要用el-form，讲真的我也不知道别人为啥那样写

css样式修改

1.先给弹框dialog设置一个定位

2.给里面的dg-table+el-table设置定位
(可能有冗余代码，但是目前弄出来就行了)

<style lang="less" scoped>
.dialogBox {
  height: 100% !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.dialog-content {
  flex: 1;
  // width: 100%;
  // height: 80%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  top: 51px;
  bottom: 0;
  right: 0;
  padding: 0 6px;
  z-index: 1;
  overflow: hidden;
  // overflow-y: auto;
}
.dialog-content-left {
  flex: 1;
  // width: 48%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
::v-deep.dgTable > div:nth-child(2) {
  height: calc(100% - 50px);
  overflow: hidden;
}
.dgTable {
  height: calc(100% - 55px);
  position: relative;
}
::v-deep.dgTable .el-table--fit {
  height: calc(100% - 55px);
  position: relative;
  width: auto;
  height: 100%;
  overflow: hidden;
  overflow-x: auto;
}
::v-deep.dgTable .el-table__body-wrapper {
  position: absolute;
  left: 0;
  top: 54px;
  bottom: 0;
  right: 0;
  padding: 0;
  z-index: 1;
  // overflow: hidden;
  overflow-y: auto;
}
.dgTable > .el-table__body-wrapper {
  /* overflow: hidden; */
  position: absolute;
  top: 41px;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  /* height: 100%; */
  overflow: hidden;
  width: 100%;
  // overflow-y: auto;
}
.pagination {
  position: absolute;
  bottom: 4px;
  width: 100%;
  text-align: right;
  margin: 0;
  margin-bottom: 10px;
}
.dialog-content-right {
  flex: 1;
  // width: 48%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.rightTable {
  height: calc(100% - 55px);
  position: relative;
}

::v-deep.el-table--scrollable-x .el-table__body-wrapper {
  height: calc(100% - 62px);
  // position: relative;
  width: auto;
  // height: 100%;
  overflow: auto;
}
.rightTable {
  /deep/ .el-table__body-wrapper {
    height: calc(100% - 62px); // 一个是正常表格项固定高度，自己设
    overflow-y: auto;
    z-index: 1;
  }
  /deep/.el-table__fixed-body-wrapper {
    height: calc(100% - 62px); // 一个是固定列表格项固定高度，自己设
    overflow-y: auto;
    pointer-events: none; // 禁止左侧固定列滑动
    cursor: default;
  }
}

.rightTable > .el-table--border {
  height: 100%;
}
.block {
  position: absolute;
  bottom: 4px;
  width: 100%;
  text-align: right;
  margin: 0;
  margin-bottom: 10px;
}
// 暂无数据-可视化区域内居中
.rightTable/deep/ .el-table__empty-block {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding-right: 100%;
}
</style>

重点是要top和bottom一起使用，这是很反常规的用法，可以强制定义盒模型的区域

三、calc()函数

calc()可以计算宽度或高度即计算一个不确定的长度（动态计算长度值）

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；【空格非常重要，如果没有空格就不起作用了】
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

注:

calc(100% - 200px)中的100%虽然可以按CSS3中定义说明的用100vw代替，但同样的代码却会出现如下图的情况，被挤下一行了！

注：
100vw指100%的viewpoint width即浏览器可视区域宽度，同理100vh指100%的viewpoint height

原因：
使用100vw时好像谷歌浏览器的滚动条宽度没算进去，导致得出的结果超出了浏览器可视区域宽度，所以就被挤到第二行去了

解决方法：

1.calc运算时多减去一点宽度（10px的滚动条宽度），但会导致右边空出一点空间，影响美观；

2.不要使用100vw，直接使用100%