Layui框架表格中插入图片 按钮以及日期时间格式化等其他自定义内容

 

  cols: [[
                { field: 'zizeng', width: 60, title: '序号', templet: "#zizeng", },
                { field: 'name', title: '素材名称' },
                { field: 'type', title: '分类' },
                {
                    field: 'icon', title: '图片', templet: function (d) {
//uploadFileUrl 是我的地址前缀
                        img = uploadFileUrl + d.icon
                        return '<div><img src="' + img + '" ' + 'alt="" width="50px" height="50px"></a></div>';
                    }
                },
                { field: 'remark', title: '备注' },
                {
                    field: 'wealth', width: 150, title: '操作', align: 'center', fixed: 'right',
                    templet: function (item) {
                        return '<span style="margin:0px 5px; color:#498fe5;cursor: pointer;" lay-event="updata" >编辑</span>' +
                            '<a style="margin:0px 5px; color:#498fe5;cursor: pointer;" lay-event="delete">删除</a>';
                    }
                },
            ]],

templet 相当于element ui 中的插槽模板一样可以根据条件渲染不同的html  不仅可以插入span标签和可以插入button等标签

2.

 这一个是编辑 和 删除是固定项 根据条件判断是否展示 提交按钮

            {
                    title: '操作',
                    align: 'center',
                    width: 200,
                    templet: function (d) {
                        var html = '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</button> ';
                        html += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button> ';
                        if (d.status === '待提交') {
                            html += '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="tijiao">提交</button>';
                        }

                        return html;
                    }
                }

3.还有就是后台返回的数据有时间格式 时间格式如下：2018-01-22T09:12:43.083Z  或  2013-11-17T11:59:22+08:00   （此处描述不准确：+08:00后结果是北京时间）返回一般是这种格式

  {
                    field: 'beginTime', title: '开工时间', width: 110,
                    templet: function (d) {
                        return layui.util.toDateString(d.beginTime, 'yyyy-MM-dd');
                    },
                },

layui.util.toDateString(d.beginTime, 'yyyy-MM-dd HH:mm:ss');

layui.util.toDateString(d.beginTime, 'yyyy-MM-dd');

layui.util.toDateString() 是 Layui 提供的日期格式化方法，用于格式化日期对象或时间戳为指定格式的字符串。 其中，第一个参数是要格式化的时间对象或时间戳，第二个参数是要生成的日期格式。