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

时间:2024-05-21 07:46:33

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

预期效果

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

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绑定,绿框为点击大图功能设置代码。

vue+element-ui实现表格内嵌套el-image自动绑定tableData中的图片url,并实现点击大图功能
下图为method代码图,将通过后端api获取的data赋给tableData

vue+element-ui实现表格内嵌套el-image自动绑定tableData中的图片url,并实现点击大图功能
自己也正在学习前端知识,有疑问或有志同道合的小伙伴欢迎一起多交流学习~