1.引入elementUI组件 并且注册,使用
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
components: { ElImageViewer },
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[...url]" />
2.页面
<el-table-column prop="costItemRemarks" label="农事照片" width="200">
<template slot-scope="scope">
<div>
<el-link type="primary" @click="lookIamge(scope.row)">查看图片</el-link>
</div>
</template>
</el-table-column>
//data中要定义的变量
url: [],
showViewer: false,
//点击文查看
lookIamge(row) {
this.url = [];
this.url.push(row.picture)
this.showViewer = true;
},
// 关闭查看
closeViewer() {
this.url = []
this.showViewer = false
},