在
layui中
设置固定列之后，如果按钮不展示，可能是按钮被隐藏在了固定列的后面，导致无法显示出来。这个问题可以通过调整固定列和非固定列的顺序来解决。
具体的实现方法可以参考以下代码：
```html
<div class="
layui-form">
<table class="
layui-table" lay-size="sm">
<colgroup>
<col width="100">
<col width="150">
<col>
<col width="200">
<col width="200">
<col width="200">
<col width="100">
</colgroup>
<thead>
<tr>
<th rowspan="2">ID</th>
<th rowspan="2">用户名</th>
<th rowspan="2">性别</th>
<th colspan="3">联系方式</th>
<th rowspan="2">操作</th>
</tr>
<tr>
<th>手机</th>
<th>邮箱</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<!-- 数据行 -->
</tbody>
</table>
</div>
```
```js
layui.use(['table', 'form'], function() {
var table =
layui.table;
// 渲染表格
table.render({
elem: '.
layui-table',
cols: [[
{field: 'id', title: 'ID',
fixed: 'left', width: 100},
{field: 'username', title: '用户名',
fixed: 'left', width: 150},
{field: 'sex', title: '性别', width: 100},
{field: 'phone', title: '手机', width: 200},
{field: 'email', title: '邮箱', width: 200},
{field: 'address', title: '地址', width: 200},
{
fixed: 'right', title: '操作', toolbar: '#toolbar', width: 100},
]],
data: [
// 数据
],
});
// 监听窗口大小变化
$(window).on('resize', function() {
var width = $('.
layui-form').width();
$('.
layui-table-box').css('width', width + 'px');
}).resize();
// 监听工具条按钮点击事件
table.on('toolbar', function(obj) {
switch(obj.event) {
case 'add':
// 添加操作
break;
case 'delete':
// 删除操作
break;
}
});
});
```
在这个例子中，将操作列
设置为固定列，并且将其放在了列的最后面，这样就可以保证操作按钮可以正常显示了。同时，在监听工具条按钮点击事件时，需要根据按钮的event属性来判断是哪个按钮被点击了，然后执行相应的操作。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
