先看一下最終效果圖：

1、css要設定行高為自動

<style type="text/css">
.layui-table-cell {
    height: auto;
}
</style>

2、html程式碼，使用templet模板：

<table class="layui-table" lay-data="{ url:'{:url(" @zone/data ")}', page:true, id:'data', limit:30" lay-filter="data">
    <thead>
        <tr>
            <
 
th lay-data="{field:'id',width:50, align:'center'}">ID</th>
            <th lay-data="{field:'name',width:120, align:'center'}">分割槽名稱</th>
            <th lay-data="{field:'scale',width:100, align:'center'}">分割槽比例</th>
            <th lay-data="{field:'database',width:120, align:'center'}"
 
>分割槽資料庫</th>
            <th lay-data="{field:'minMoney',width:100, align:'center'}">最低充值</th>
            <th lay-data="{field:'group',width:100, align:'center'}">所屬分組</th>
            <th lay-data="{field:'status',width:100, align:'center'}">分割槽狀態</th>
            <
 
th lay-data="{width:200,align:'center',templet: '#timeTpl'}">建立/修改時間</th>
            <th lay-data="{fixed: 'right', align:'center', toolbar: '#menu'}">操作</th>
        </tr>
    </thead>
</table>

看上面的程式碼可知，<th lay-data="{width:200,align:'center',templet: '#timeTpl'}">建立/修改時間</th>這行使用了模板

3、javascript新增相應的templet模板

<script type="text/html" id="timeTpl"> 
{{d.creatTime}}
{/*判斷修改時間是否為空，不為空就顯示*/}
{{#  if(d.updateTime !=null){ }}
    <br>{{d.updateTime}}
{{#  } }}
</script>

換行使用的是<br>換行符

轉載：https://blog.csdn.net/qq15577969/article/details/104109430