template里代码
<template>
<el-table>
<el-table-column
prop="pic"
header-align="center"
align="center"
label="图片"
width="66px">
<template slot-scope="scope">
<img
:src="scope.row.pic"
:alt="scope.row.name"
:title="scope.row.name"
@click="previewPic(scope.row.pic)"
/>
</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">确 定</el-button>
</span>
</el-dialog>
<!-- 图片预览 -->
</template>
script里代码
<script>
export default {
data () {
return {
dialogVisible: false,
previewpic: ""
}；
}，
methods: {
//预览大图
previewPic(url) {
this.previewpic = url;
this.dialogVisible = true;
}
}
}
</script>
