elementUI的el-table单元格中显示多张图片,并能点击放大查看
时间: 2024-01-05 14:04:38 浏览: 41
可以使用自定义插槽来实现在el-table单元格中显示多张图片,并将图片设置为可点击放大查看的效果。具体可参考以下代码:
```html
<el-table :data="tableData">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column label="图片">
<template slot-scope="scope">
<div>
<el-image
v-for="(url,index) in scope.row.imageUrls"
:key="index"
:src="url"
:preview-src-list="scope.row.imageUrls"
fit="contain"
style="width: 50px;height: 50px;cursor: pointer;"
@click.native.prevent
>
</el-image>
</div>
</template>
</el-table-column>
</el-table>
```
其中,data中的每个元素需要包含一个imageUrls属性,它是一个数组,存放着当前行需要显示的所有图片的url。通过v-for指令遍历这个数组,在el-image组件中动态绑定src和preview-src-list属性。同时,需要给el-image组件绑定click事件,以实现点击放大查看的效果。
当然,上述代码仅供参考,具体实现还需要结合具体业务需求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![gz](https://img-home.csdnimg.cn/images/20210720083447.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)