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>
