场景 显示某抓拍系统的照片，在点击该照片后面的预览时，在新标签页中打开图片的网络URL地址。 注： 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。
场景
显示某抓拍系统的照片，在点击该照片后面的预览时，在新标签页中打开图片的网络URL地址。
注：
关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。
实现
首先在el-table中添加操作列
</el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" > <template slot-scope="scope"> <a class="a-style" @click="handlePreView(scope.row)">预览</a> </template> </el-table-column>在template中添加了a标签并设置了器样式和绑定了点击事件，在点击事件方法中还传递了参数当前行的数据
然后样式a-style用来设置颜色
<style scoped>.a-style{ color:yellowgreen;}</style>然后在点击事件中
/** 预览按钮操作 */ handlePreView(row) { const photopath = row.photopath ; if (photopath.match(/D:\\pic_old\\(\S*)/)) { let str = "http://静态资源映射所在服务器ip:250/" + photopath.match(/D:\\pic_old\\(\S*)/)[1]; window.open(str,'_blank') } else { this.$message({ message: '照片路径格式不对，无法预览', type: 'warning' }); } },这里首先获取到了photopath这个是存储的图片路径，这里是磁盘的绝对路径，
如果能直接获取图片的网络url直接执行
window.open(str,'_blank')即可，其中str是打开标签页的url
这里的逻辑是对图片的磁盘路径做了校验，符合规则的话则转换成网络URL,否则弹窗提示。