当前位置 博文首页 > yuanting_的博客:layui.laytpl的if else 写法

    yuanting_的博客:layui.laytpl的if else 写法

    作者:[db:作者] 时间:2021-08-25 10:09

    表格操作列

    <!-- 表格操作列 -->
    <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: '操作'}
                        ]]
                    });
    
    cs