layui數據表格特殊樣式修改

場景:

layui版本: 2.4.5

數據表格異步獲取數據, 並需要自定義部分表格樣式

問題:

渲染表格需要修改樣式的字段如下代碼:

<script>
layui.use('table', function() {
        var table = layui.table;

        //執行一個 table 實例
        table.render({
            // 省略其他參數
            cols: [[
                {field: 'url', title: '', width: '10%', templet:'#pic_tpl',
                    style:'height:80px; line-height:80px;', align: 'center'},
            ]],
        });
</script>

<!-- 自定義 laytpl -->
<script type="text/html" id="pic_tpl">
    <img src="{{d.url}}"  height='70px' onclick="window.open('{{d.url}}')" >
</script>

結果渲染出來的表格多出了, .layui-table-cell .laytable-cell-1-0-1 兩個css類的樣式且是在包含着templet自定義模板外的 div 標籤中, 無法直接定義同名樣式進行覆蓋樣式

解決方案:

使用了 layui 的數據表格參數中的 done, 即在表格渲染完成之後通過 jQuery 來對以上修改不到的類進行選中, 並添加自己要的樣式進行覆蓋
done 的詳細用法查看官方文檔: https://www.layui.com/doc/modules/table.html#done

layui.use('table', function() {
        var table = layui.table;

        //執行一個 table 實例
        table.render({
            // 省略其他參數
            cols: [[
                {field: 'url', title: '', width: '10%', templet:'#pic_tpl',
                    style:'height:80px; line-height:80px;', align: 'center'},
            ]],
            // 數據渲染完的回調
            done: function (res, curr, count) {
                $(".layui-table-cell").css("height", "100%");
            }
            
        });