vue项目列表图片放大
<el-table
:data="tableData"
class="view_table"
style="width: 100%"
id="tableExcel"
v-loading="loading"
@expand-change="expandchange"
>
<el-table-column prop="addTime" label="创建时间" align="center" min-width="150"></el-table-column>
<el-table-column prop="id" label="商品ID" align="center" min-width="90"></el-table-column>
<el-table-column prop="icon" label="商品封面图" align="center" min-width="90">
<template slot-scope="scope">
<!-- <el-image style="width: 40px" :src="scope.row.icon"></el-image> -->
<el-popover placement="bottom" trigger="hover">
<!--trigger属性值：hover、click、focus 和 manual-->
<a :href="scope.row.icon" target="_blank" title="查看最大化图片">
<img :src="scope.row.icon" style="width: 160px; height: 160px" />
</a>
<img
slot="reference"
:src="scope.row.icon"
style="width: 40px; height: 40px; cursor: pointer"
/>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="goodsName" align="center" label="商品名称" min-width="90"></el-table-column>
<el-button type="primary" size="small" @click="Editor(scope.row)">编辑</el-button>
<el-button type="primary" size="small" @click="Detail(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
之前：
<el-table-column prop="icon" label="商品封面图" align="center" min-width="90">
<template slot-scope="scope">
<el-image style="width: 40px" :src="scope.row.icon"></el-image>
</template>
</el-table-column>
现在：
<el-table-column prop="icon" label="商品封面图" align="center" min-width="90">
<template slot-scope="scope">
<el-popover placement="bottom" trigger="hover">
<!--trigger属性值：hover、click、focus 和 manual-->
<a :href="scope.row.icon" target="_blank" title="查看最大化图片">
<img :src="scope.row.icon" style="width: 160px; height: 160px" />
</a>
<img
slot="reference"
:src="scope.row.icon"
style="width: 40px; height: 40px; cursor: pointer"
/>
</el-popover>
</template>
</el-table-column>
