table 滚动条设置

table 滚动条设置

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年 6月 16日

   在做项目过程中，遇到表格带有滚动条的页面。可以通过滚动条把过多的表格数据通过滚动方式进行显示查看。下面就如何设置和使用表格滚动条进行简单讲解与总结一下。

首先，这次设置使用表格滚动条，我是使用了layui table数据表格文档-layui.table。layui插件是最近学习与做项目需要长用到的一个插件。Table模块是layui最核心的组成之一，它用于对表格进行一些列功能和动态化数据操作。它支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多表头，支持单元的自定义模板，支持对表格重载，如搜索、条件筛选。支持复选框，支持分页，支持单元格编辑等一些列的功能。

然而，创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器，这样一个简单的表格就可以被创建起来了。一般顺序都是绑定容器、设置数据接口、在表头设定对应的字段，其余的就由layui进行表格渲染。

下面是使用方法的代码截图，见代码截图如下：

如图中所示，使用table模块，引用layui插件是必不可少的，但要实现table表格带有滚动条，就得给它设置一个相应的高度，设置有一定的高度，滚动条就会自动出现了。实现的效果可参考最后所展示的效果图图一。

上面代码展示的是table模块的一种见得的使用方式，它还有方法渲染、自动渲染、转静态表格这三种初始化的支持，以便于其满足各种情况的需求。这三种初始化也有各自的使用方法，对表格数据进行渲染。而上面代码所展示的只是clos表头的基本设置，clos表头的一些参数如下：

Field是一个string类型，用于设定字段名

Title是一个string类型，设定标题名

Width是一个number或string类型，设定列宽，不设定时将自动分配

Type是一个string类型，设定列类型。它的可选值有：normal（常规列，无需设定）、

checkbox（复选框列）、radio（单选框列）、numbers（序号列）、space（空列）。

Sort是一个boolean类型，是否允许排序（false/true）

这几个参数都是上面代码所用到的。更多参数类型的详细解释可去layui.table模块查询。

除了table表格可以设置高度使其出现滚动条，在常用的select下拉框中也可以使用滚动条。当select选择下拉框中的选择数据过多时，我们可以给它设置一个上下滚动条，较便于数据选择。其实设置的方法也很简单，就是设置一个select-size，也就可以说是选择下拉框尺寸吧。这样选择下拉框滚动条就会出现了，实现的效果请参考最后的效果图图二。

下面是select选择下拉框设置滚动条的代码截图，见代码截图如下：

两种滚动条的设置都很简单，而且都可以查阅页面所隐藏起来的数据。

最后是实现的效果图，见截图如下：