有用到這個
https://blog.csdn.net/DianaGreen7/article/details/81169893
如何像圖中顯示出圖片信息
以下是解決方案：
<!--列表-->
<el-table :data="homes" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="id" label="ID" min-width="15%" >
</el-table-column>
<el-table-column prop="message" label="信息" min-width="15%" >
</el-table-column>
<el-table-column prop="link" label="連接" min-width="20%" >
</el-table-column>
<el-table-column prop="image" label="圖片" min-width="20%" >
<!-- 圖片的顯示 -->
<template slot-scope="scope">
<img :src="scope.row.image" min-width="70" height="70" />
</template>
</el-table-column>
<el-table-column label="操作" min-width="10%">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
</template>
</el-table-column>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
這是更具體的例子（HTML+SCSS+JS）：
https://jsfiddle.net/stardew/1Lv7qdam/2/
參考資料：
https://segmentfault.com/q/1010000011537328
https://segmentfault.com/q/1010000010357683
————————————————
版權聲明：本文為CSDN博主「DianaGreen7」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/DianaGreen7/article/details/81169893