如何在表格中添加图片（使用el-table、el-table-column），即在Vue.js中使用ui-element？

Posted 2023-02-23

【中文标题】如何在表格中添加图片（使用el-table、el-table-column），即在Vue.js中使用ui-element？

【英文标题】：How to add an image in a table (using el-table, el-table-column), ie using ui-element in Vue.js?

【发布时间】：2020-10-29 10:41:22

【问题描述】：

我是 Vue.js 的新手，并且已经设法使用 ui-element 构建了一个简单的表格。用于构建表格的 ui-element 是 el-table，并使用 el-table-column 和 prop 显示了各个列（请在下面找到代码）。现在，我想在我的表格中显示图像/头像/缩略图（即表格中的一列应该填充图像）。我不知道如何在表格中插入图像，因为我正在使用 prop 用数据填充表格。我的表格代码如下：

Vuejs 中的 html 部分：

<!--Table-->
    
          <el-table :data="posts"
                ref="Table"
                stripe
                style="width: 100%;">

                <el-table-column min- prop="name"
                   label="Username">
                </el-table-column>

                <el-table-column min- prop="count_followers"
                   label="Followers">
                </el-table-column>

                <el-table-column min-  prop="display_pic_url"
                   label="Display Pic">
                </el-table-column> -->
           </el-table>

我使用 axios 使用了数据并将信息存储在一个名为 posts 的数组中。我在html代码中使用了上面的posts数组，即:data = "posts"。我已经使用 el-table-column 和 prop 在网页上显示了数据。上面第三列代表展示图片，prop = "display_pic_url" 代表头像url。但是，我不想在表格上打印这些数据（即显示图片的 url），而是想显示托管在 url 上的个人资料图片。我如何实现这一目标？如何在每一行中显示个人资料图片，而不是在每一行中打印 url？

我已经在下面显示了我创建的表格。

请查看代码并建议修改代码以显示头像。

如果能得到任何帮助，我将不胜感激。

谢谢。

【参考方案1】：

您可以使用插槽范围：

<el-table-column min-  prop="display_pic_url" label="Display Pic">
  <template slot-scope="scope">
      <img :src="scope.row.display_pic_url"/>
  </template>
</el-table-column>

【讨论】：

有没有办法使用 el-table-column 只为每一行更改特定列的文本颜色？ el-table-column 似乎没有颜色属性，我想不出一种方法来设置它的样式。感谢您的帮助。例如，如果我想将Followers列的内容设为蓝色，那我该怎么做呢？