1，页面包含下拉框、复选框、按钮、表格（固定表头）
<html lang=""> <head> <link rel="stylesheet" type="text/css" href="../css/elementUiIndex.css"> <link rel="stylesheet" type="text/css" href="../css/global.css"> <link rel="stylesheet" type="text/css" href="../css/elementDesign.css"> <link rel="stylesheet" type="text/css" href="../css/sqlscript.css"> <title>视塔ERP</title> <script src="../js/request.js"></script> <script src="../js/message.js"></script> <script src="../js/page.js"></script> </head> <body> <div class="sqlscript-container"> <div class="top-part"> <div class="sqlscript-search-part"> <div class="left-part"> <div class="el-select" onclick="showSelectBrandList()"> <div class="select-trigger"> <div class="el-input el-input--suffix"> <input class="el-input__inner" type="text" readonly="" autocomplete="off" placeholder="选择品牌" name="brand"> <span class="el-input__suffix"> <span class="el-input__suffix-inner"> <i class="el-select__caret el-input__icon el-icon-arrow-up"></i> </span> </span> </div> </div> </div> <div class="el-select" onclick="showSelectScriptList()"> <div class="select-trigger"> <div class="el-input el-input--suffix"> <input class="el-input__inner" type="text" readonly="" autocomplete="off" placeholder="选择脚本" name="script"> <span class="el-input__suffix"> <span class="el-input__suffix-inner"> <i class="el-select__caret el-input__icon el-icon-arrow-up"></i> </span> </span> </div> </div> </div> <label class="el-checkbox"> <input type="checkbox" name="orderShow" value="订单回写"> <span class="el-checkbox__label">订单回写</span> </label> <button class="el-button el-button--primary el-button--mini is-plain" type="button" onclick="download()"> <span>下载</span> </button> <button class="el-button el-button--primary el-button--mini is-plain" type="button" onclick="run()"> <span>运行</span> </button> <button class="el-button el-button--default el-button--mini" type="button" onclick="initialize()"> <span>格式化</span> </button> <button class="el-button el-button--default el-button--mini" type="button" onclick="upload()"> <span>上报</span> </button> </div> </div> <div class="sqlscript-search-result"> <div class="el-textarea"> <textarea class="el-textarea__inner" autocomplete="off" placeholder="输入文本" name="text" style="resize: none;"></textarea> </div> </div> </div> <div class="footer-part"> <div class="sqlscript-search-result"> <div class="table-content-fixed"> <table cellspacing="0"> <thead> <tr> <th width="125px">姓名</th> <th width="125px">年龄</th> <th width="125px">地址</th> <th width="125px">单位</th> <th width="125px">组织关系</th> </tr> </thead> </table> </div> <div class="table-content-scroll"> <table cellspacing="0"> <tbody></tbody> </table> </div> </div> </div> <div class="el-select__popper el-popper is-light is-pure brand-popper" role="tooltip" data-popper-placement="bottom-start"> <div class="el-select-dropdown" style="min-width: 140px;"> <div class="el-scrollbar"> <div class="el-select-dropdown__wrap el-scrollbar__wrap el-scrollbar__wrap--hidden-default"> <ul class="el-scrollbar__view el-select-dropdown__list"> <li class="el-select-dropdown__item"><span>选项1</span></li> <li class="el-select-dropdown__item"><span>选项2</span></li> <li class="el-select-dropdown__item"><span>选项3</span></li> <li class="el-select-dropdown__item"><span>选项4</span></li> <li class="el-select-dropdown__item"><span>选项5</span></li> </ul> </div> </div> </div> <div class="el-popper__arrow" style="position: absolute; left: 64px;top:-5px;"></div> </div> <div class="el-select__popper el-popper is-light is-pure script-popper" role="tooltip" data-popper-placement="bottom-start"> <div class="el-select-dropdown" style="min-width: 162px;"> <div class="el-scrollbar"> <div class="el-select-dropdown__wrap el-scrollbar__wrap el-scrollbar__wrap--hidden-default"> <ul class="el-scrollbar__view el-select-dropdown__list"> <li class="el-select-dropdown__item"><span>选项6</span></li> <li class="el-select-dropdown__item"><span>选项7</span></li> <li class="el-select-dropdown__item"><span>选项8</span></li> <li class="el-select-dropdown__item"><span>选项9</span></li> <li class="el-select-dropdown__item"><span>选项10</span></li> </ul> </div> </div> </div> <div class="el-popper__arrow" style="position: absolute; left: 78px;top:-5px;"></div> </div> </div> </body> <script> let showBranchSelect = false; let showScriptSelect = false; // 获取运行数据 function getRunData() { // 处理滚动条引起的宽度 默认无滚动条 document.getElementsByClassName('table-content-fixed')[0].style = ''; // 获取数据 let runDataList = [ { name: "张三", age: "11", address: "abc", unit: "上海浦东新区", relation: "团员", }, { name: "李四", age: "63", address: "南京市江宁区", unit: "354", relation: "群众", } ]; // 处理滚动条引起的宽度 长度大于9出现滚动条 if (runDataList.length > 9) { document.getElementsByClassName('table-content-fixed')[0].style = "width:calc(100% - 8px)"; } // 清空执行结果 let tbody = document.getElementsByTagName('tbody')[0]; tbody.innerHTML = ''; // 挂载执行结果 runDataList.forEach((item, index) => { let tr = document.createElement('tr'); for (let key in item) { let td = document.createElement('td'); td.width = '125px'; td.innerHTML = item[key]; tr.appendChild(td); } tbody.append(tr) }) } // 下拉框1显隐 function showSelectBrandList() { document.getElementsByClassName('el-select__popper')[0].style = showBranchSelect ? "display:none" : "display:block;" showBranchSelect = !showBranchSelect; } // 下拉框2显隐 function showSelectScriptList() { document.getElementsByClassName('el-select__popper')[1].style = showScriptSelect ? "display:none" : "display:block;" showScriptSelect = !showScriptSelect; } // 选中下拉框选项 function setSelectStatus(obj, items, name) { for (let i = 0; i < items.length; i++) { items[i].className = 'el-select-dropdown__item'; } obj.className = 'el-select-dropdown__item selected hover'; document.getElementsByName(name)[0].value = obj.innerText; name === 'brand' ? showSelectBrandList() : showSelectScriptList(); } function run() { getRunData(); } // 初始化 function iniEvent() { run(); let brandItems = document.getElementsByClassName("el-select__popper")[0].getElementsByClassName("el-select-dropdown__item"); let scriptItems = document.getElementsByClassName("el-select__popper")[1].getElementsByClassName("el-select-dropdown__item"); for (let i = 0; i < brandItems.length; i++) { brandItems[i].onclick = function () { setSelectStatus(this, brandItems, 'brand'); } } for (let i = 0; i < scriptItems.length; i++) { scriptItems[i].onclick = function () { setSelectStatus(this, scriptItems, 'script'); } } } window.onload = function () { iniEvent(); } </script> </html>
通过showBranchSelect和showScriptSelect控制下拉框显隐，用无序列表实现下拉框，页面加载完毕，为每一个下拉选项绑定点击事件，改变被点击的选项的样式，使用document.getElementsByName赋值：
2，固定表头
用两个table实现固定表头，第一个table只包含表头，第二个table只包含内容，其外设置div，设置固定高度，用来滚动表格内容。
- 获取表格数据，使用for循环创建tr、td，为tr挂载td，每一循环结束将tr挂载到tbody上
- 这样实现的表格会发现表头宽度和单元格宽度不一致，发生错位，所以给th和td加上宽度。
- 但是当数据过多时，表头宽度为100%，表格内容右侧多出了滚动条，所以又发生了错位。实践发现当数据多于9条（实际几条因设置的高度不同而变化，我这里是9条）就会出现滚动条，办法是当出现滚动条时，设置表头的总宽度为当前宽度减去滚动条宽度：
if (runDataList.length > 9) { document.getElementsByClassName('table-content-fixed')[0].style = "width:calc(100% - 8px)"; }
我这里设置滚动条的宽度是8px：
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background-color: #eaecf1; border-radius: 3px; }
