Layui:表格Templet判断代码

Layui的table组件中可以使用templet属性来自定义单元格内容。通过在templet函数中编写条件语句,我们可以根据不同情况返回不同的HTML代码或文本。

下面是一个示例代码,展示了如何使用templet进行条件判断并输出相应的结果:

// layui table配置项
var tableConfig = {
    cols: [[ // 列设置
        {field:'name', title:'名称'},
        {field:'age', title:'年龄'},
        {title:'操作', templet: '#operateTpl'} // 使用模板字符串指定自定义模板
    ]]
};
 
// 自定义模板
<script type="text/html" id="operateTpl">
    {{# if(d.status === 'active'){ }}
        已激活
    {{# } else if (d.status === 'inactive'){ }}
        未激活
    {{# } else { }}
        其他状态
    {{# } }}
</script>

上述代码中,operateTpl为自定义模板ID,通过{{#}}包裹起来的部分就是JavaScript代码片段。
在这里,我们使用了if-else语句对d.status(每一行数据的status字段)进行判断,然后根据不同的值输出不同的HTML代码或文本。

注意,需要将该自定义模板放在页面合适位置,确保能被正常加载到页面中才能生效。

posted @ 2025-05-09 12:10  Dy大叔  阅读(111)  评论(0)    收藏  举报