layui.laytpl的if else 写法

不念不忘少年蓝@ 2021-12-15 06:49 558阅读 0赞

## 表格操作列 ##

<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}
                ]]
            });
      });

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW50aW5nXw_size_16_color_FFFFFF_t_70]

## 这种直接在表格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: '操作'}
                        ]]
                    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW50aW5nXw_size_16_color_FFFFFF_t_70]: /images/20211214/ed89b26db03240a99f30713c9aec40fd.png