element-ui table中的图片的显示解决方案

DianaGreen7

于 2018-07-23 16:24:34 发布

阅读量5.5w

点赞数 40

分类专栏： Element 文章标签：图片的显示 element-ui table

本文链接：https://blog.youkuaiyun.com/DianaGreen7/article/details/81169893

版权

Element 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在HTML表格中展示图片的具体实现方案，并提供了一个包含图片显示功能的表格示例，通过使用Element UI框架的表格组件，可以方便地在表格的一列中插入并展示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何像图中显示出图片信息
这里写图片描述

以下是解决方案：

        <!--列表-->
        <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>