element-ui table列为图片路径的处理

展示为小图，并且可以点击查看大图，当图片路径为空时展示默认图片。

HTML代码如下

<el-table :data="tableData">
  <el-table-column label="图片" width="70" align="center">
      <template slot-scope="scope">
         <img :src="scope.row.imageUrl||defaultImg" style="width: 50px;height:50px;" @click="openImg(scope.row.imageUrl)">
      </template>
  </el-table-column>
</el-table>

    <el-dialog width="400px" :visible.sync="imgVisible" class="img-dialog">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="dialogImgUrl" width="100%" height="100%">
      </el-card>
    </el-dialog>

JS代码如下

// 引入要做默认显示的图片
import defaultImg from '静态文件默认图片路径'

data: {
   // 可用的图片链接，可以随意复制一个网络图片路径
   src: 'http://element.eleme.io/static/hamburger.50e4091.png',
   tableData: [],
   imgVisible: false,
   defaultImg: defaultImg,
},
created() {
  this.tableData = [{imageUrl: null},{imageUrl: this.src}]
},
methods: {
    // 展示图片
    openImg(url) {
      if (url) {
        this.imgVisible = true
        this.dialogImgUrl = url
      }
    }
}

Style代码

覆盖掉原有的dialog样式

.img-dialog {
    .el-dialog__header {
        padding: 0!important;
    }
}

不懂可留言，看到定回复。重在理解思路！