el-table 最简单的方法配置图片预览功能
效果预览
1、安装插件
npm install v-viewer@next viewerjs
2、全局引入，配置main.js
// main.js
import VueViewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
app.use(VueViewer, {url: 'data-src', // 指定 data-* 属性，用于存储原始图片 URLoptions: {// 这里可以配置 viewerjs 的选项inline: true, // 以 inline 的方式显示图片button: true, // 显示缩放按钮// ...其他选项},
});
3、页面使用
<el-table-column label="图片" align="center" prop="picUrl"><template #default="scope"><img v-viewer :src="scope.row.picUrl" width="100" height="100" /></template></el-table-column>
