Element：Table表格在单元格内放多个数据

在练习时候用Element的Tab表格的时候，需要在表头下的单元格内把数组的图片和名字放在同一格

（改好才发现挺憨的，这么一个简单的错误。。）

但是在使用el的Tab表格时候，在<el-table-column>中直接给prop绑定数组对象的url路径是识别不出来图片的

（这里用的是el中table的基础用法）

这样子就放不进去图片惹

解决的方法先是想到不在prop里面写了，在el-table-column标签的范围内去写

然后想到的是去column的父级el-table标签上去用v-for，然后在column的范围内用img和p标签

但使用v-for下来，出现的问题大概都是：

1、渲染了多个表格，且多个表格里面单个表格的图片都是同一张

2、渲染出了两个重复列，要放出来的两个图片分别在左右表头的单元格中

实现的效果应该是一个行内的物品列有自己的图片和名字放在一起显示，如下

把下面的代码放在需要展示的column里面

<el-table-columnlabel="宝贝"><template   slot-scope="appraiseList">            <img :src="appraiseList.row.url"  min-width="70" height="70" /></template>
</el-table-column>

这里的：appraiseList是我存储数据对象的数组，默认那给的是scope，改不改都无所谓了= =，appraiseList.row.url中的url是存放图片url的属性名

然后就可以得到上面的效果

解决过程：

1、在el的组件找到Tab表格 -> 自定义列模板

2、可以看到在例子里面

这个是一个i标签和一个span放在一起

和需求的img和p放在一起是差不多的

数据也是放在column内，copy下来放在自己的表格里面改一下

                              <template slot-scope="scope"><img :src="scope.row.url" alt=""><p>{{scope.row.name}}</p></template>

打开看效果就可以了

Element：Table表格在单元格内放多个数据相关推荐

rowspan table布局_css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）...
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能:在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元 ...
table表格中单元格的合并
目录 table表格中单元格的合并 table表格中单元格的合并很多朋友不一定了解,今天我就写一篇博客来跟大家分享一下table表格中的跨行合并和跨列合并. 我们先看一个合并过的表格,大家可以先思考一 ...
Table表格的单元格提示
表格的单元格显示单元格内容,如果太多显示为省略号鼠标放在上面,显示里面的全部内容 CSS关键代码 table{table-layout: fixed; }td{white-space: nowra ...
Element table各种合并单元格
一.表头合并列这是官网合并列效果,可是,并不适用于只有一级表头的,官方文档并未发现直接实现属性一级表头合并实现方式:给table加 header-cell-style,代码如下 <el-ta ...
Ant table表格合并单元格使用
Ant 合并单元格+覆盖样式项目需求: 最后一列用来展示详情,表格左侧点击行切换:要求选中行的样式和详情信息用一个边框凸显出来结果如下: 切换效果展示如下: 实现过程: 在ant合并单元格demo ...
设置单元格填充方式_【WPS神技能】Excel表格中单元格内的双色填充效果有点意思！...
在Excel表格中做数据报表时,如果有需要重点突出的单元格数据,简单的操作自然是选中相关单元格,在"开始"菜单栏中找到"填充颜色",选择自己想要的颜色即可,如下 ...
HTML5 table表格合并单元格和合并边框
原文地址和代码: 原文地址转载请备注代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
html table 合并单元格分页,element table组件合并单元格
合并单元格,如果situation 一致,则合并 getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组:spanArr是一个空的数组,用于存放每一行记录的合并数:po ...
table表格表头单元格添加斜线
<!DOCTYPE html> <html> <head><title>表格斜线</title><style>html {hei ...

Element：Table表格在单元格内放多个数据

Element：Table表格在单元格内放多个数据相关推荐

最新文章

热门文章