欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 21:52:25
...

先看一下最终效果图:

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

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

相关标签: HTML