layui中table 固定表头
时间: 2024-07-31 22:01:13 浏览: 345
解决layui表格的表头不滚动的问题
Layui是一款轻量级的前端UI框架,它的Table组件提供了一种方便的方式来创建表格,包括固定表头的功能。固定表头主要是为了让用户无论滚动页面到哪里,表头始终保留在可视范围内,便于查看。
在layui中设置固定表头,你可以这样做:
```html
<table lay-filter="table" lay-component="table">
<thead>
<tr>
<!-- 指定列作为固定列 -->
<th lay-unfixed></th> <!-- 非固定列 -->
<th lay-fixed></th> <!-- 固定列 -->
</tr>
</thead>
<tbody>
<!-- 数据行 -->
</tbody>
</table>
<script>
// 初始化table,设置固定表头
layui.use('table', function(){
var table = layui.table;
table.init('table', { // 表格ID
fixedHeader: true, // 开启固定表头
// ...其他配置选项
});
});
</script>
```
在这个例子中,`lay-fixed`属性用于标记固定的列,非固定列则不包含此属性。`lay-unfixed`也可以用于指定不固定的列。固定表头的启用通过`fixedHeader: true`配置项完成。
阅读全文