Element-ui中表格中点击图片预览功能

1.实现的功能，在表中，点击图片，实现图片的放大预览：

2.代码实现。

html">
      <el-table-column prop="imageUrl" label="图片" min-width="20%" >
                 <!-- 图片的显示 -->
                 <template   slot-scope="scope">            
                    <img :src="scope.row.imageUrl"  min-width="70" height="70" 
                           @click="previewPic(scope.row.imageUrl)" />
                 </template>         
      </el-table-column> 
</el-table>


 <!-- 图片预览   放在表格外面，这是个弹出狂-->
      <el-dialog :visible.sync="dialogVisible" :modal="false" title="图片预览" width="50%">
        <img :src="previewpic" alt=""  width="100%" />
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">OK</el-button>
          </span>
       </el-dialog>
  <!-- 图片预览 -->

<script>
 export default {
    data () {
      return {
        dialogVisible: false,
        previewpic: ""
       }；
    }，
    methods: {
       //预览大图
       previewPic(url) {
           this.previewpic = url;
           this.dialogVisible = true;
        }
    }
}
</script>