layui的table表格在同一单元格换行显示2个数据（layui-table）

转自：https://blog.csdn.net/qq15577969/article/details/104109430

先看一下最终效果图：

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>换行符