Layui 在表格中放置轮播图

效果：第一列是主图，第三列是轮播图
思路：使用了数据表格的自定义列模板，在模板中使用轮播模块。
表格数据结构：

[{id: 1, name: "创辉商户酒店11", address: "中国广东省广州市黄埔区开创大道3341号", phone: "251615",sub_image: "[\"https://localhost:64823/lib/image/2021-04-29/49-cbe4370da3a1a96ae3bacbe8164b67c8.jpg\",\"https://localhost:64823/lib/image/2021-04-29/49-20210214.jpg\"]"}]

代码：

<script type="text/html" id="Carousel">
    <div class="layui-carousel Carousel" id="{{d.id}}">
        <div carousel-item>
            {{# layui.each(JSON.parse(d.sub_image), function(index, item){ }} 
            <img src="{{item}}" alt="Alternate Text" />
            {{# }) }}
        </div>
    </div>
</script>

         table.render({
                elem: '#productList'
                , url: tableUrl
                , page: true
                , where: { action: 'getMerchantList' }
                , cols: [[
                    { type: 'checkbox' }
                    , { field: 'id', width: 80, title: 'ID', sort: true }
                    , { field: 'main_image', align: 'center', title: '商户主图', templet: "#ImageTem" }
                    , { field: 'name', title: '商户名称' }
                    , { field: 'sub_image', width: 200, align: 'center', title: '滚动图', templet: "#Carousel" }
                    , { field: 'phone', title: '电话' }
                    , { field: 'address', title: '地址' }
                ]]
                , done: function (res, curr, count) {
                    layui.each(res.data, function (index, item) {//循环渲染轮播
                        carousel.render({
                            elem: '#' + item.id
                            , width: '100%' //设置容器宽度
                            , height: '150px'
                            , arrow: 'none' //显示箭头

                        });
                    })
                }
            });