elementUI的el-table单元格中显示多张图片，并能点击放大查看


如何在el-table的单元格中显示多张图片

具体效果图如下图所示：
在这里插入图片描述
在这里插入图片描述
主要的实现思路就是在template中添加一个span标签，然后做一个v-for的循环，去加载数组中的每一张图片，具体的实现代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-table-column label="社圈动态图片" align="center" width="265px">
    <template slot-scope="scope">
        <span v-for="(item,index) in scope.row.pictures" :key="index">
            <el-popover placement="left" trigger="click" width="300">
                <img :src="item" width="100%" />
                <img
                    slot="reference"
                    :src="item"
                    :alt="item"
                    style="max-height: 70px;max-width: 70px; padding: 5px"
                />
            </el-popover>
        </span>
    </template>
</el-table-column>

有关于el-popover的使用可以看下面这篇文章：有关于el-popover的使用