项目背景：

        需求是，在触发各节点时，要显示当前节点下各时间点对应的订单量，并以表格形式表现。如图所示：

前期：

引入element ui 基本可以满足大部分的样式。

 第一次使用el-popover+el-table组合，发现table无法适配原始页面，不会随机型大小进行缩放适配。超出了屏幕范围。但调试无果。

第二次，选择了el-dialog+el-table结合使用。

使用dialog的过程中，也是出现了适配问题，dialog高度需要做适配。于是，通过定义以下样式，进行适配：

.pub_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;
        }
    }
}

在el-dialog标签中设置class="pub_dialog"即可。

弹窗为页面高度的90%，且上下居中。

el-dialog__body内容部分会根据内容的高度，自动显示上下的滚动条。

如上转载自：https://www.mybj123.com/5131.html

经过以上，dialog能够适配整个页面，但是多个机型测试，发现屏幕小的机型中，当表格下拉列表过长时，表格长度超出了dialog的长度。如图：

这样的结果还会影响那个机型的下拉，下拉不到底，且滑动效果是滑动的当前弹框后边的主页面。

先解决这个超出长度的问题：

在dialog中添加表格，但是表格数据过多时，弹框会被拉长。然后就想设置表格内容滚动。但尝试修改table自身的高度，发现就算改了，当列表加长的时候，还是会超出。并没有控制住。

如上解决方案：

/deep/.el-dialog__body {
  height: 70vh;overflow: auto;
}

vh：1vh等于视口高度的1%  补充：css3自适应布局单位vw,vh详解

通过添加以上控制，发现可以将表格控制再dialog中通过滚动条实现滑动查看数据的效果了。

至此，整个需求算是基本完成了。

但是存在另外也兼容问题就是，iPhone7机型或者系统，在使用以上办法时，操作滚动条，会导致内部页面跟着滚动。

这个问题暂时还没有解决，保留，