1 修改原生html 2 overflow问题排查

原生html

需求：

带td tr 的table，submit按钮，
首先实现左侧hover按钮，其次实现样式优化

想法 & 踩坑

1. 抄element-ui的 css就行 ，但是不用全抄，input的移过来差不多了
   注意往下找到原生实现部分 ，（见下面）
2. 发现表格无法居中，还有因为提示是用的display none，住表格里会疯狂抖动
   解决：提示框用absolute定位，就不会影响到表格了（注意和表格宽高一样就行）（感谢josie）
   最后给表格 table设置上： style=" 80%;margin:auto" 就可以居中了
3. 因为只有一个文件…… 带圈的i按钮， 用css的icon实现
   这里最后参考的是zhangxinxu：
   介绍： https://www.zhangxinxu.com/wordpress/2019/08/pure-css-icon/
   实现：https://www.zhangxinxu.com/sp/icon/css.php （先复制主类，再复制单个的）
   这个是简单一点的： https://blog.csdn.net/weixin_34327761/article/details/91366793 （但是它是斜体 就不行）

实现

input type=submit实际上和button差不多，改css是：input[type=submit]:hover
css 添加类似element-ui样式

点击查看代码

            input {
                -webkit-appearance: none;
                background-color: #fff;
                background-image: none;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                box-sizing: border-box;
                color: #606266;
                display: inline-block;
                font-size: inherit;
                height: 30px;
                line-height: 30px;
                outline: 0;
                padding: 0 15px;
                transition: border-color 0.2s
                    cubic-bezier(0.645, 0.045, 0.355, 1);
            }

添加hover效果，点击后30s可撤销（这里有个很好玩的钢琴效果emmmm）
这里参考了 https://blog.csdn.net/weixin_45764383/article/details/104499712
按说可以事件委托，但是emmmm ……

            (function () {
                let len = document.getElementsByClassName("info").length;
                let timer=new Array(len);
                for (let i = 0; i < len; i++) {
                    let btn = document.getElementsByClassName("info")[i];
                    let box = document.getElementsByClassName("tip")[i];
                    box.onmouseover = btn.onmouseover = function () {
                        if(timer[i]) clearTimeout(timer[i])
                        box.style.display = "inline-block";
                    };
                    box.onmouseout = btn.onmouseout = function () {
                        timer[i] = setTimeout(function(){
                            box.style.display = 'none';
                        },500);
                    };
                }
            })();

overflow问题：

场景：

父元素area 下el-tabs，el-tab单页有的需要展示滚动条，有的不需要（因为是内嵌页面，内嵌里有自己的滚动条）
1、本来是给area都设置滚动条，先取消了area给el-tabs的滚动条
2、此时发现， 无论怎么给从里往外的元素加overflow scroll都无效，或者加了定位，也无效

原因：

仔细点F12小手，看区域
此时可以看到，area只有那么一小块，是el-tabs的内容超出了，设置滚动条的元素越级了
换句话说，el-tab在el-tabs的容器内没有overflow（超出）
el-tabs在area的容器里超出了，但是area已经设置了没有滚动条，所以后面的设置就无效了

解决：

1、给el-tabs添加样式：
height:100%;overflow-y:scroll 让tab溢出在tabs里，由此可控（生效）
2、因为需求是 要么有要么没有 用动态绑定
:style='activeName=="xxxxx?"height:100%;overflow-y:scroll;":""'