el-table 最简单的方法配置图片预览功能

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-* 属性，用于存储原始图片 URL
  options: {
    // 这里可以配置 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>

希望对你有用，可以关注下，后续会继续更新前端简单小技巧