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-column
	label="宝贝"
	>
		<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>

打开看效果就可以了