项目背景：
需求是，在触发各节点时，要显示当前节点下各时间点对应的订单量，并以表格形式表现。如图所示：
前期：
引入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机型或者系统，在使用以上办法时，操作滚动条，会导致内部页面跟着滚动。
这个问题暂时还没有解决，保留，