vue+element-ui实现表格内嵌套el-image自动绑定tableData中的图片url，并实现点击大图功能

预期效果

预期的目标结果如下图中的效果： 点击图片弹出大图

实现

官方文档：element-ui的table部分

首先，我们知道element-ui的数据绑定方式是：method方法里return一个tableData数据数组，然后在el-table表格中设置 :data=“tableData” ，再使用 prop=“key” 进行数据绑定。

而因为我们使用的是展开行，所以对于展开行里的内容使用 template 标签包裹，设置 slot-scope 属性即可获取数据实现绑定。element-ui中的大图功能是设置属性 :preview-src-list=“array” array是个scr地址数组，也就是可以多张图，我们直接将array定义为一个1*1的数组，将url码放入即可实现点击大图功能。

红框为图片url绑定，绿框为点击大图功能设置代码。

下图为method代码图，将通过后端api获取的data赋给tableData

自己也正在学习前端知识，有疑问或有志同道合的小伙伴欢迎一起多交流学习~