layui.laytpl的if else 写法详解编程语言

表格操作列

<!-- 表格操作列 --> 
<script type="text/html" id="role-table-bar"> 
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> 
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> 
    <a class="layui-btn layui-btn-xs" lay-event="menu">菜单管理</a> 
 
    {
  {# if (d.systemName === 'saas-upms') { }} 
    <a class="layui-btn layui-btn-xs" lay-event="auth">权限管理</a> 
    {
  {# } else { }} 
    <a class="layui-btn layui-btn-xs layui-btn-disabled" lay-event="auth">权限管理</a> 
    {
  {# } }} 
 
</script> 

渲染表格

layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects'], function () { 
        var form = layui.form; 
        var table = layui.table; 
        var config = layui.config; 
        var layer = layui.layer; 
        var util = layui.util; 
        var admin = layui.admin; 
        var formSelects = layui.formSelects; 
 
        //渲染表格 
        table.render({ 
            elem: '#role-table', 
            url: 127.0.0.1 + '/roles', 
            where: { 
                access_token: config.getToken().access_token 
            }, 
            page: true, 
            cols: [[ 
                {type: 'numbers'}, 
                {field: 'id', sort: true, title: 'ID',width: 80}, 
                {field: 'name', sort: true, title: '角色名'}, 
                {field: 'systemName', sort: true, title: '所属系统'}, 
                {field: 'code', sort: true, title: 'Code'}, 
                { 
                    field: 'createTime', sort: true, templet: function (d) { 
                        return util.toDateString(d.createTime); 
                    }, title: '创建时间' 
                }, 
                {field: 'center',toolbar:'#role-table-bar', title: '操作',width: 250} 
            ]] 
        }); 
  }); 

效果图

在这里插入图片描述

这种直接在表格field判断也可以

treetable.render({ 
                    treeColIndex: 1, 
                    treeSpid: -1, 
                    treeIdName: 'id', 
                    treePidName: 'parentId', 
                    elem: '#menus-table', 
                    url: config.base_server + 'api-user/menus/findAlls', 
                    where: { 
                        access_token: config.getToken().access_token 
                    }, 
                    page: false, 
                    cols: [[ 
                        {type: 'numbers'}, 
                        {field: 'name', minWidth: 200, title: '菜单名称'}, 
                        {field: 'systemName', title: '所属系统'}, 
                        {field: 'url', title: '菜单路由'}, 
                        {field: 'path', title: '菜单URL'}, 
                        {field: 'css',  align: 'center', title: '样式'}, 
                        {field: 'sort', width: 80, align: 'center', title: '排序号'}, 
                        { 
                            field: 'isMenu', width: 80, align: 'center', templet: function (d) { 
                                if (d.isMenu == 2) { 
                                    return '<span class="layui-badge layui-bg-gray">按钮</span>'; 
                                } 
                                if (d.parentId == -1) { 
                                    return '<span class="layui-badge layui-bg-blue">目录</span>'; 
                                } else { 
                                    return '<span class="layui-badge-rim">菜单</span>'; 
                                } 
                            }, title: '类型' 
                        }, 
                        {templet: '#menus-state', width: 120, align: 'center', title: '操作'} 
                    ]] 
                }); 

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/17670.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论