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()
                    }
                ]
            }
        }
        
       <!-- 其他不重要的代碼省略 -->
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章