登录
首页 >  文章 >  前端

如何通过 Element 表格的 template 解决一行显示两行显示问题?

来源:php

时间:2024-12-14 13:09:47 496浏览 收藏

目前golang学习网上已经有很多关于文章的文章了,自己在初次阅读这些文章中,也见识到了很多学习思路;那么本文《如何通过 Element 表格的 template 解决一行显示两行显示问题?》,也希望能帮助到大家,如果阅读完后真的对你学习文章有帮助,欢迎动动手指,评论留言并分享~

如何通过 Element 表格的 template 解决一行显示两行显示问题?

如何解决 element 表格中一行显示两行的问题?

问题描述:

需求是需要在一个表格中展示每行的 昨日 今日 两天的数据,但前端目前的写法只实现了样式的展示,后端提供的 json 数据中包含了这些数据。

解决方案:

根据 elementui 的文档,可以使用 template 来在 el-table-column 中显示多个行的内容。具体实现如下:

<el-table-column prop="todayNewly" label="当日新增" header-align="center">
  <template slot-scope="scope">
    <el-row prop="today">{{ scope.row.todayNewly.today }}</el-row>
    <el-row prop="yesterday">{{ scope.row.todayNewly.yesterday }}</el-row>
  </template>
</el-table-column>

在这个模板中,通过 scope.row 访问当前行的对象,然后就可以获取 todaynewly 对象的 today 和 yesterday 属性。这样,就可以在一行中显示两天的数据了。

到这里,我们也就讲完了《如何通过 Element 表格的 template 解决一行显示两行显示问题?》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!

声明:本文转载于:php 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>