插槽显示图片 => 并且可以点击预览

425 阅读1分钟

如果加了预览会导致数据报错
那么需要在前面加v-if来阻止报错

<el-table-column prop="auth_file" label="xxxx">
          <template slot-scope="{row}">
            <!-- <img :src="scope.row.auth_file" style="height:70px"> -->
            <el-image
              style="width: 100px; height: 100px"
              :src="row.auth_file"
              :preview-src-list="srcList(row.auth_file)"
            >
            </el-image>
          </template>
</el-table-column>
 computed: {
    srcList() {
      return function(img) {
        return img.split(',')
      }
    }
  },

备用方案

  • 也可以这样处理
:preview-src-list="row.auth_file.split(',')"