期望效果：

單元格樣式.png

相關(guān)代碼：

<script type="text/html" id="number">
    <div style="line-height:25px;">
        <span style="color:#328FFE">{{ d.Nownumber }}</span>
        <p style="color:#BCBBC9;margin-top:-5px;">(卡號:{{ d.Oldnumber }})</p>
    </div>
</script>
<!--時間合并-->
<script type="text/html" id="time">
    <div style="line-height:25px;">
        <span>{{ d.Day }}</span>
        <p style="color:#BCBBC9;margin-top:-5px;">{{ d.Hour }}</p>
    </div>
</script>
<script>
 layui.use('table', function () {
        var table = layui.table;
        var cols = [[
            , {field: 'Day', title: '時間', templet: '#time',align: 'center'}
            , {field: 'Number', title: '流水號', templet: '#number', width: 150,align: 'center'}
        ]];
        table.render({
            elem: '#history-basic'
            , url: '../json/history-basic.json'
            , cols: cols
            , even: true
            ,skin:"line"
            , page: true
        });
    });

</script>

代碼注釋：

1.png

2.png

對JSON數(shù)據(jù)進(jìn)行判斷

<script type="text/html" id="type">
    {{#  if(d.Type === '撤銷消費(fèi)'){ }}
    <span style="color: #FF0000;">{{ d.Type }}</span>
    {{#  } else { }}
    {{ d.Type }}
    {{#  } }}
</script>