让单个单元格显示两个数据

最新推荐文章于 2024-03-04 17:19:45 发布

❄Wallace

最新推荐文章于 2024-03-04 17:19:45 发布

阅读量3.4k

点赞数

分类专栏：个人技术分享文章标签： HTML

本文链接：https://blog.csdn.net/qq_44538193/article/details/92689876

版权

个人技术分享专栏收录该内容

38 篇文章 0 订阅

订阅专栏

                                  让单个单元格显示两个数据

开发工具与关键技术：Visual Studio 2015
作者：李德新
撰写时间：2019年6月12日

在我们的学习过程中，都会要使用到许许多多的表格，而且这些表格各有各的特色与风格，那么今天我们就来尝试一下各种不同的数据表格的不同风格，如何在layui插件做出来的表格中让一个单元格呈现出两个数据。
首先，我们要在layui插件的帮助下去创建一个表格，然后再去创建我们所需要的数据的表格的表头，当我们初步建成了我们需要的这个数据表格之后，我们就可以往里面放入我们需要的数据了。
在这里插入图片描述
如上图所示，我们如往常一样创建完这样的一张数据表格之后，便往里面放入我们所需要的数据即可，那么我们想要看到数据表格中单个单元格中呈现两个数据的效果，那么我们就必须要查询到数据，并把这些数据传输到我们的页面之上。
在这里插入图片描述
如此，我们在控制器上成功的查询到我们所需要的所有的数据并把这些数据传输到了页面之上了，那么我们要如何趋势线我们所需要的效果呢？
那么我们就需要，layui插件中的table模块中的自定义模板了，在自定义模板中我们就可以随意写入我们所需要的各种样式以及我们所需要的一些判断。
在这里插入图片描述
如图中所示，是我们自定义模板的格式，我们只要如图中所示的去布置好我们所需要的数据即可，那么接下来我们就要为我们的数据表格添加上另一个数据并且让这两个数据垂直显示。我们首先是要为每一个数据表头添加上一个templet参数然后再写方法。
在这里插入图片描述
当我们为每一个数据表头添加上一个templet参数之后我们就差一个方法了，首先我们要确定我们在前面的查询中已经查询到了我们所需要的数据，但不要把它放在表头上面，而是要把它们放到我们之后需要写的方法里面。
在这里插入图片描述
如图中所示把我们需要的两个数据都放在我们需要写的这个方法之中，然后再为它们中间添加上一个换行符号，便可以达到单个单元格中呈现两个数据的效果了。