el-image在el-table中使用
时间: 2023-11-03 20:57:19 浏览: 95
在el-table中使用el-image可以通过以下几个步骤实现:
1. 使用v-for指令来遍历每个列表的图片地址数组,并用:src绑定每个图片的地址,以展示在表格中。同时,可以使用style属性设置展示图片的大小和样式。
2. 使用:perview-src-list属性来开启图片预览功能,并调用一个方法(比如getImgList())来处理点击查看图片的操作。每次调用getImgList()方法时,传入当前表格的图片地址数组以及点击图片的下标。
3. 在getImgList()方法中,创建一个临时数组arr来存放放大查看图片时的图片地址数组。将放大的图片及其后面的图片下标提到数组的最前面,而将前面的图片下标放在数组的后面。
通过以上步骤,可以在el-table中使用el-image来展示图片,并实现图片预览功能。
相关问题
el-table-column中el-image
引用<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue+elementui进阶之路-el-table中显示图片](https://blog.csdn.net/weixin_33859231/article/details/93629744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [el-table-column 中的 el-image 无法正常显示图片](https://blog.csdn.net/Alan_Walker688/article/details/129199265)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
el-image实现在el-table-column中展示多张图片
el-image可以在el-table-column中展示多张图片。具体实现方法如下:
1. 在el-table-column中使用v-for遍历每个列表的图片地址数组,结合:src="item"把每个图片展示在表格里,展示图片的大小样式用style来设定。
2. 在getImgList()方法中建立临时数组arr存放放大查看图片时的图片地址数组,即把放大的图片及后面图片的下标提到最前面,把前面图片的下标放在后面。
3. 通过:perview-src-list="getImgList(scope.row.workPhoto, index)"来开启图片预览功能且调用方法getImgList(),每次传入当前表格的图片地址数组以及点击查看的图片的下标。