layui的table表格在同一单元格换行显示2个数据(layui-table)
程序员文章站
2022-07-13 21:52:25
...
先看一下最终效果图:
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>换行符
上一篇: OpenCV学习笔记(二)
下一篇: opencv 学习笔记(二)