Element-ui中表格el-table图片预览效果实现（非常实用）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element-ui中表格el-table图片预览效果实现（非常实用）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🍊作者：计算机编程-吉哥

🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。

🍊心愿：点赞 👍 收藏 ⭐评论 📝

🍅 文末获取源码联系

🏆先展示效果：

Element-ui中表格el-table图片预览效果实现（非常实用）

🏆使用的是下面这个插件噢~

v-viewer插件

🏆安装部署（重要）：

1.安装依赖，在项目文件里进行安装

安装命令：npm install v-viewer --save

Element-ui中表格el-table图片预览效果实现（非常实用）

2.在main.js中写如下：

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer);

Element-ui中表格el-table图片预览效果实现（非常实用）

3.在vue页面用<viewer>标签包裹着img图片

<el-table-column
prop="image"
label="封面"
align="center"
width="150"
>
<template slot-scope="scope">
  <viewer>
    <img
      :src="scope.row.image"
      style="height: 140px; width: 140px;cursor:pointer " >
  </viewer>
</template>
</el-table-column>

Element-ui中表格el-table图片预览效果实现（非常实用）