在
layui 中，可以利用 `table` 模块的 `cols` 属性来
动态设置表格列。下面是一个简单的例子：
```
javascript
layui.use(['table', 'form'], function() {
var table =
layui.table;
var form =
layui.form;
// 渲染表格
table.render({
elem: '#demo',
url: '/demo/table/user/', // 数据接口
cols: [[ // 初始列
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', minWidth: 150},
{field: 'sex', title: '性别', width: 80, templet: '#sexTpl'},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', minWidth: 200},
{field: 'logins', title: '登入次数', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
// 监听radio按钮的变化，
动态改变表格列
form.on('radio(col)', function(data) {
var cols = table.config.cols[0]; // 获取初始列
var newCols = []; // 新列
for (var i = 0; i < cols.length; i++) {
if (data.value === 'all' || cols[i].field === 'id' || cols[i].field === 'wealth') {
newCols.push(cols[i]); // 如果是全选或者是id、wealth列，则保留
} else if (cols[i].field.indexOf(data.value) !== -1) {
newCols.push(cols[i]); // 如果是选
中的列，则保留
}
}
table.reload('demo', {
cols: [newCols] // 重新渲染表格，设置新列
});
});
});
```
在这个例子
中，我们首先使用 `table.render` 方法渲染表格，并设置了初始列。接着，我们监听了一个 radio 按钮组的变化事件，根据选
中的值
动态生成新的列数组 `newCols`，最后利用 `table.reload` 方法重新渲染表格并设置新列。在监听函数
中，我们采用了遍历初始列的方式，根据选
中的值来判断是否要保留该列。需要注意的是，我们保留了 id 和 wealth 列，因为这两列是在初始列
中就存在的。同时，我们使用了 `table.config.cols[0]` 来获取初始列。在这个例子
中，我们还用到了
layui 的表格列
模板和工具栏等功能，需要在 HTML
中定义。具体代码可以查看下面的完整示例。
HTML:
```html
<div class="
layui-form">
<div class="
layui-form-item">
<label class="
layui-form-label">显示列：</label>
<div class="
layui-input-block">
<input type="radio" name="col" value="all" title="全部" checked>
<input type="radio" name="col" value="username" title="用户名">
<input type="radio" name="col" value="email" title="邮箱">
<input type="radio" name="col" value="sex" title="性别">
<input type="radio" name="col" value="city" title="城市">
<input type="radio" name="col" value="sign" title="签名">
<input type="radio" name="col" value="logins" title="登入次数">
</div>
</div>
</div>
<table id="demo" lay-filter="test"></table>
<!-- 定义表格列
模板 -->
<script type="text/html" id="sexTpl">
{{# if(d.sex === '男'){ }}
<span style="color: green;">{{d.sex}}</span>
{{# } else if(d.sex === '女') { }}
<span style="color: red;">{{d.sex}}</span>
{{# } else { }}
<span>{{d.sex}}</span>
{{# } }}
</script>
<!-- 定义表格工具栏 -->
<script type="text/html" id="barDemo">
<a class="
layui-btn
layui-btn-xs" lay-event="edit">编辑</a>
<a class="
layui-btn
layui-btn-danger
layui-btn-xs" lay-event="del">删除</a>
</script>
```
完整示例：https://www.
layui.com/demo/table/dynamicColumn.html
本文介绍了如何在layui JavaScript动态模板中使用if else语句进行条件判断，通过一个具体的例子展示了其用法。
最低0.47元/天 解锁文章
扫一扫
3750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
