需求是根据当前表格的行数据来获取对应的图片。然后我的行数据里已经有了id值，图片的名称也是id值。所以先通过按钮点击获取对应行的数据。这是写在表格里的按钮。
<template slot-scope="scope"><!-- scope.row可以拿到对应行的数据 --><el-buttontype="primary" icon="el-icon-search"@click="dialogVisible = true"@click.native.prevent="getrows(scope.row)">查看</el-button></template>
然后写弹窗，注意el-dialog不能写在template里面，不然会根据数据生成多个弹窗，一旦图片较长的时候，通过滑动条查看图片的时候会显示低层的弹窗，就会出现多出来的部分。
这里我的src是自己图片的位置，图片按照1,2,3这样子的顺序来命名
<el-dialogtitle="帧图":visible.sync="dialogVisible":modal="false"append-to-body:width="dialogWidth"> <!-- :modal="false"去掉遮蔽层 --><!-- :width绑定宽度，来适应图片的宽度 --><!-- 通过load事件来获取图片宽度，使得容器宽度适应图片 --><!-- src里注意require里面用模板字符串 --><el-image :src="require(`../../assets/${index}.jpg`)" @load="onLoadImg" :width="boxWidth"></el-image><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog>
然后在data里加入数据，这里仅展示有关数据，我的表格数据里是包含id值的。
export default {data(){return{index:1, //默认设为1，因为我的图片没有0.jpg，所以如果设置为0为报错dialogWidth: "", //弹窗宽度，可根据图片宽度进行改变boxWidth: "", //图片宽度//其他数据里包含id值，这个可以自己根据数据来调整}},methods:{// 通过图片宽度来改变容器宽度，做到自适应，但是有待改善的地方。如果图片大小不一样.//不刷新页面的情况下，点击了宽度较小的图片后再点击宽度较大的图片，宽度会按照小的图片的宽度来显示。onLoadImg: function (e) {var img = e.target;var width = 0;if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {width = img.width;}// if ((img.height > img.width) && width > 370) {//width = 370// } else if (width > 600) {//width = 600// }this.boxWidth= width + 'px';this.dialogWidth = width + 40 + 'px';},//获取id值，并且将其赋值给index，从而获取对应的图片名字getrows(row){console.log(row.id)this.index=row.id}，}}
表格里左边显示图片帧号，帧号即id值，右边是可以点击显示帧图
点击查看，横向的图片显示
竖线的图片显示
由于高度是自适应的，所以有些图片可能较长超出页面，需要拖动。
小图片显示：
