layui数据表格显示图片

最新推荐文章于 2024-09-05 17:05:13 发布

ArnoBM

最新推荐文章于 2024-09-05 17:05:13 发布

阅读量2.1k

点赞数 1

分类专栏： html 文章标签： html

原文链接：https://www.jianshu.com/p/686f466f7078

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

后端接口返回如下

{
    "code": 0,
    "count": 1000,
    "data": [{
            "age": 23,
            "avatar": "http://pic4.zhimg.com/50/v2-2ef01343920e66f878b05ff380d902d7_hd.jpg",
            "id": 1,
            "name": "admin"
        },
        {
            "age": 23,
            "avatar": "http://img3.imgtn.bdimg.com/it/u=1067286080,4118108903&fm=11&gp=0.jpg",
            "id": 1,
            "name": "admin"
        }
    ],
    "msg": ""
}

html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
    <table id="mytable" lay-filter="test"></table>
    <script src="/static/layui/layui.all.js"></script>
    <script>
        layui.use(['layer', 'table'], function () {
            var layer = layui.layer;
            var table = layui.table;

            table.render({
                elem: '#mytable',
                height: 312,
                url: '/get_data',
                page: true,
                cols: [[
                    {field: 'id', title: 'id'},
                    {field: 'name', title: 'name'},
                    {field: 'age', title: 'age'},
                    {field: 'avatar', title: 'avatar', templet: '#img'},
                    {field: 'avatar', title: 'avatar2', templet: '<div><img src="{{ d.avatar }}" style="width:30px; height:30px;"></div>'}
                ]]
            })
        });
    </script>

    <script type="text/html" id="img">
        <div><img src="{{ d.avatar }}" style="width: 30px; height: 30px;"></div>
    </script>
</body>
</html>