ELEMENT-UI 在TABLE里面增加图片显示

先上效果图：

然后直接上代码：

<!-- 其他代码省略 -->

<el-table :data="tableData" v-loading:loading border style="width: 100%">
	<el-table-column
           prop="fileName"
           label="文件名">
    </el-table-column>
    <el-table-column
           prop="thumbnail"
           label="缩略图">
       <template slot-scope="scope">
               <img :src="scope.row.thumbnail" min-width="70" height="70"/>
       </template>
    </el-table-column>
    <el-table-column
           prop="priority"
           label="优先级">
    </el-table-column>
    <el-table-column
           prop="result"
           label="结果">
    </el-table-column>
    <el-table-column
           prop="timestamp"
           label="时间">
    </el-table-column>
</el-table>

<!-- 其他代码省略 -->

同时附上data的样例代码：

 export default {
        name: "Table",
        data() {
            return {
                tableData: [
                    {
                        ‘fileName‘: ‘1‘,
                        ‘thumbnail‘: ‘https://a1.cdn.91360.com/cms/bs3/upload/section/31c9f4a94769e924b7ccd764c075b29a_t.png‘,
                        ‘priority‘: ‘1‘,
                        ‘result‘: ‘1‘,
                        ‘timestamp‘: (new Date()).toUTCString()
                    },
                    {
                        ‘fileName‘: ‘2‘,
                        ‘thumbnail‘: ‘https://a1.cdn.91360.com/cms/bs3/upload/section/31c9f4a94769e924b7ccd764c075b29a_t.png‘,
                        ‘priority‘: ‘2‘,
                        ‘result‘: ‘2‘,
                        ‘timestamp‘: (new Date()).toUTCString()
                    },
                    {
                        ‘fileName‘: ‘3‘,
                        ‘thumbnail‘: ‘https://a1.cdn.91360.com/cms/bs3/upload/section/31c9f4a94769e924b7ccd764c075b29a_t.png‘,
                        ‘priority‘: ‘3‘,
                        ‘result‘: ‘3‘,
                        ‘timestamp‘: (new Date()).toUTCString()
                    }
                    ,
                    {
                        ‘fileName‘: ‘4‘,
                        ‘thumbnail‘: ‘https://a1.cdn.91360.com/cms/bs3/upload/section/31c9f4a94769e924b7ccd764c075b29a_t.png‘,
                        ‘priority‘: ‘0‘,
                        ‘result‘: ‘4‘,
                        ‘timestamp‘: (new Date()).toUTCString()
                    }
                ]
            }
        }
       <!-- 其他不重要的代码省略 -->
}

ELEMENT-UI 在TABLE里面增加图片显示

原文：https://www.cnblogs.com/LilLazy/p/14684791.html