layui 动态table 设置头部固定 方法
时间: 2023-10-09 07:13:41 浏览: 1362
您好,要实现 layui 动态表格头部固定的效果,可以使用 layui 的 table 模块提供的 `scroll` 参数。具体步骤如下:
1. 在 table.render() 方法中,设置 table 的 `scroll` 参数,将固定表头和滚动条结合起来,示例代码如下:
```
table.render({
elem: '#demo',
url: '/api/table',
page: true,
cols: [[
{field:'id', title:'ID', width:80, fixed: 'left'},
{field:'username', title:'用户名', width:120},
{field:'email', title:'邮箱', width:150},
{field:'sign', title:'签名', minWidth:200},
{field:'sex', title:'性别', width:80, sort: true},
{field:'city', title:'城市', width:100},
{field:'experience', title:'积分', width:80, sort: true},
{field:'score', title:'评分', width:80, sort: true},
{field:'classify', title:'职业', width:100},
{field:'wealth', title:'财富', width:135, sort: true, fixed: 'right'}
]],
scroll: {
x: '100%', // 设定表格宽度100%
y: '400px' // 设定表格高度400px
}
});
```
2. 在 table 的 `cols` 参数中,设置需要固定的表头的列的 `fixed` 参数为 `left` 或 `right`,表示将该列固定在表格左侧或右侧。
这样,就可以实现 layui 动态表格头部固定的效果了。希望对您有所帮助。
阅读全文
相关推荐


















