添加一个页面，html+js实现下拉框、按钮、表格（固定表头）

一、下拉框

目标：实现如下效果的下拉框，样式可以使用element ui作为参考

        由于原生的下拉列表可操作性太低，笔者参考element ui换了一种思路，使用一个只读的input输入框作为触发点，使用无序列表实现下拉框，具体实现如下：

<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__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>一年级</span></li>
                    <li class="el-select-dropdown__item"><span>二年级</span></li>
                    <li class="el-select-dropdown__item"><span>三年级</span></li>
                    <li class="el-select-dropdown__item"><span>四年级</span></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="el-popper__arrow" style="position: absolute; left: 64px;top:-5px;"></div>
</div>

        使用showBranchSelect 控制显隐，当点击输入框时，展示下拉框，再次点击，隐藏下拉框，方法为showBranchSelectList()。此外，在页面加载完毕时，为每一个下拉选项绑定点击事件，改变被点击的选项的样式，使用document.getElementsByName赋值：

    let showBranchSelect = false;
    function showSelectBrandList() {
        document.getElementsByClassName('el-select__popper')[0].style = showBranchSelect ? "display:none" : "display:block;"
        showBranchSelect = !showBranchSelect;
    }
    // 选中下拉框选项
    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 === 'grade' ? showSelectBrandList() : showSelectScriptList();
    }
    // 初始化
    function iniEvent() {
        run();
        let brandItems = document.getElementsByClassName("el-select__popper")[0].getElementsByClassName("el-select-dropdown__item");
        for (let i = 0; i < brandItems.length; i++) {
            brandItems[i].onclick = function () {
                setSelectStatus(this, brandItems, 'brand');
            }
        }
    }
    window.onload = function () {
        iniEvent();
    }

 二、按钮

<button 
    class="el-button 
    el-button--primary 
    el-button--mini is-plain" 
    type="button" 
    onclick="run()">
    <span>查询</span>
</button>

三，固定表头

        用两个table实现固定表头，第一个table只包含表头，第二个table只包含内容，其外设置div，设置固定高度，用来滚动表格内容。

• 获取表格数据，使用for循环创建tr、td，为tr挂载td，每一循环结束将tr挂载到tbody上
• 这样实现的表格会发现表头宽度和单元格宽度不一致，发生错位，所以给th和td加上宽度。这里笔者设置125px，实际上是占了表格总宽度的1/5
• 但是当数据过多时，表头宽度为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;
}

        具体实现如下：

<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>

    // 获取运行数据
    function run() {
        // 处理滚动条引起的宽度 默认无滚动条
        document.getElementsByClassName('table-content-fixed')[0].style = '';
        // 获取数据
        let runDataList = [
            {
                name: "张三",
                age: "18",
                address: "江苏南京",
                no: "1",
                borrowing: "python",
            }
        ];
        // 处理滚动条引起的宽度 长度大于9出现滚动条
        if (runDataList.length > 16) {
            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)
        })
    }

总结

        本篇记录了使用element ui的样式输出下拉框、固定表头的表格，仅做学习记录，如有更好的办法，请斧正~