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

Layui(框架) 专栏收录该内容
7 篇文章 0 订阅

先看一下最终效果图:

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

  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 扫一扫,分享海报

参与评论
请先登录 后发表评论~
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值