如何在element UI lt;el-table>表头中添加 select选择器或其他组件

Posted 2023-04-01

<el-table-column type="selection" width="55">，</el-table-column>。

select是一个计算机函数，位于头文件#include <sys/select.h> 。该函数用于监视的文件描述符的变化情况——读写或是异常。

原型：int select (int maxfd + 1,fd_set *readset,fd_set *writeset,fd_set *exceptset,const，struct timeval * timeout)。

参考技术A 官方文档内：
Table-column Attributes
render-header 列标题 Label 区域渲染使用的 Function
Function(h, column, $index )
h即为createElenment 或者 jsx 渲染组件 参考技术B <el-table-column type="selection" width="55">
</el-table-column>
添加这个 就是选择框 参考技术C <el-col :span='7' >
<el-select v-model="item.image" filterable placeholder="请选择" style="width:270px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>
</el-col> 参考技术D <el-table-column prop="itemName" label="列名称">
<template scope="scope">
<el-select v-model="scope.row.itemName" placeholder="请选择">
<el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>

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

【中文标题】如何在表格中添加图片（使用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列的内容设为蓝色，那我该怎么做呢？