vue中 el-table每个单元格包含多个数据项处理
更新时间:2023年11月11日 11:34:23 作者:还是大剑师兰特
vue项目中,我们需要在el-table中显示数组数据,有的时候,需要在一个单元格中显示多条数据,如何实现呢,对vue el-table单元格相关知识感兴趣的朋友一起看看吧
应用场景
vue项目中,我们需要在el-table中显示数组数据,有的时候,需要在一个单元格中显示多条数据,如何实现呢?看看下面源代码,一看便知。
示例效果
示例源代码(共80行)
/* * @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN) * @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。 * @Email: 2909222303@qq.com * @weixin: gis-dajianshi * @First published in CSDN * @First published time: 2023-11-11 */ <template> <div class="djs-box"> <div class="topBox"> <h3>vue+element UI:一个表格单元中显示多条数据 </h3> <div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div> </div> <div class="cbox"> <el-table :data="tableData"> <el-table-column prop="title" label="图片" width="180"> <template slot-scope="scope"> <el-image :src="scope.row.thumbnail_pic_s"></el-image> </template> </el-table-column> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column label="混合数据"> <template slot-scope="scope"> <div> <div>文章标题:{{scope.row.title}}</div> <div>作者姓名:{{scope.row.name}}</div> <div>作者邮箱:{{scope.row.email}}</div> </div> </template> </el-table-column> </el-table> </div> </div> </template> <script> export default { data() { return { tableData: [], } }, mounted() { this.getdata() }, methods: { getdata() { let url = "/listdata" this.$request(url, {}, "GET") .then((res) => { this.tableData = res.data.data console.log(this.tableData) }) }, } } </script> <style scoped> .djs-box { width: 900px; height: 600px; margin: 50px auto; border: 1px solid seagreen; } .topBox { margin: 0 auto 0px; padding: 10px 0; background: palevioletred; color: #fff; } .cbox { padding: 10px; } </style>
核心代码
<el-table-column label="混合数据"> <template slot-scope="scope"> <div> <div>文章标题:{{scope.row.title}}</div> <div>作者姓名:{{scope.row.name}}</div> <div>作者邮箱:{{scope.row.email}}</div> </div> </template> </el-table-column>
到此这篇关于vue中 el-table每个单元格包含多个数据项处理的文章就介绍到这了,更多相关vue el-table单元格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
详解vue-cli+element-ui树形表格(多级表格折腾小计)
这篇文章主要介绍了vue-cli + element-ui 树形表格(多级表格折腾小计),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-04-04Vue中使用highlight.js实现代码高亮显示以及点击复制
本文主要介绍了Vue中使用highlight.js实现代码高亮显示以及点击复制,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-01-01
最新评论