获取layui table 动态设置列宽度
时间: 2024-05-01 10:23:35 浏览: 9
可以通过设置table的lay-data属性中的width属性来动态设置列的宽度。具体方法如下:
1. 在table标签中添加lay-data属性,设置width属性为一个数组,数组中的每个元素表示对应列的宽度,例如:
```
<table class="layui-table" lay-data="{width: [100, 200, 150]}">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
</tbody>
</table>
```
2. 如果需要在代码中动态设置列宽度,可以通过修改table的lay-data属性来实现,例如:
```
var widthArr = [100, 200, 150];
var tableData = {
// 表格数据
};
var tableConfig = {
// 其他配置
width: widthArr
};
// 渲染表格
layui.table.render({
elem: '#myTable',
data: tableData,
cols: [[
{field: 'col1', title: '列1'},
{field: 'col2', title: '列2'},
{field: 'col3', title: '列3'}
]],
// 设置表格属性
done: function(res, curr, count) {
// 动态设置列宽度
tableConfig.width = [150, 250, 100];
$('#myTable').attr('lay-data', JSON.stringify(tableConfig));
layui.table.init('myTable');
}
});
```
在上面的代码中,我们在表格渲染完成后,通过修改tableConfig对象的width属性来动态设置列宽度,然后将修改后的lay-data属性重新设置给表格。最后,使用layui.table.init()方法重新渲染表格,使修改生效。