el-image在el-table中使用

在el-table中使用el-image可以通过以下几个步骤实现：

1. 使用v-for指令来遍历每个列表的图片地址数组，并用:src绑定每个图片的地址，以展示在表格中。同时，可以使用style属性设置展示图片的大小和样式。

2. 使用:perview-src-list属性来开启图片预览功能，并调用一个方法（比如getImgList()）来处理点击查看图片的操作。每次调用getImgList()方法时，传入当前表格的图片地址数组以及点击图片的下标。

3. 在getImgList()方法中，创建一个临时数组arr来存放放大查看图片时的图片地址数组。将放大的图片及其后面的图片下标提到数组的最前面，而将前面的图片下标放在数组的后面。

通过以上步骤，可以在el-table中使用el-image来展示图片，并实现图片预览功能。

相关问题

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()，每次传入当前表格的图片地址数组以及点击查看的图片的下标。

<el-table :data="tableData" stripe size="medium" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column prop="goodName" label="图书名称"></el-table-column> <el-table-column prop="price" label="图书单价"></el-table-column> <el-table-column prop="num" label="图书数量"></el-table-column> <el-table-column prop="img" label="图片"> <template v-slot="scope"> <el-image :src="scope.row.img" style="width: 100px; height: 100px"></el-image> </template> </el-table-column> 添加注释

这是一个使用了 Element UI 中的 el-table 组件展示数据的代码片段，其中：

- data 属性绑定了一个名为 tableData 的数组，用于存储要展示的数据。
- stripe 属性设置为 true，表示表格显示斑马线样式。
- size 属性设置为 medium，表示表格大小为中等。
- @selection-change 事件绑定了一个名为 handleSelectionChange 的方法，用于处理表格中选中行的变化。
- el-table-column 组件用于定义表格的列，其中 type="selection" 表示该列为复选框列，prop 属性指定了该列对应数据对象的属性名，label 属性指定了该列的表头名称，width 属性设置了该列的宽度，sortable 属性设置为 true，表示该列可以排序。
- 在第四列中，添加了一个插槽（slot），用于自定义该列的内容。在该插槽中，使用了 el-image 组件展示了图片。通过 scope.row.img 获取了该行数据对象中 img 属性的值，并将其作为 el-image 组件的 src 属性值。