给el-table数据每一行某列前面加图标

可以使用 el-table 的 slot-scope 来实现该需求。具体步骤如下：

1. 在 el-table 组件中添加 column 的属性，例如将要在第二列添加图标，则可以添加如下代码：

<el-table-column label="XXX" prop="XXX">
  <template slot-scope="scope">
    <img src="图标地址" alt="图标">
    {{ scope.row.XXX }}
  </template>
</el-table-column>

其中，scope.row 表示表格每一行的数据，通过 scope.row.XXX 获取需要添加图标的列中的数据。

2. 在 img 标签中设置需要添加的图标地址和替代文本。

通过以上步骤，即可轻松地为 el-table 数据中的每一行某列前面加上图标。

相关问题

el-table表格某列添加icon图标

在Element UI的el-table组件中，如果你想在表格的某一列添加图标，你可以使用`<template>`标签结合`v-if`或自定义事件来实现。首先，你需要创建一个包含图片和文字的模板列：

<template slot="nameColumn" slot-scope="scope">
  <el-icon :type="scope.row.status ? 'success' : 'warning'" class="status-icon"></el-icon>
  {{ scope.row.name }}
</template>

这里假设`status`字段是一个布尔值，如果为真则显示成功图标（例如`success`），反之为警告图标（例如`warning`）。`slot-nameColumn`是你需要替换为实际列名的地方。

然后，在数据绑定中，为每个行对象设置`status`属性：

data() {
  return {
    tableData: [
      { name: '示例一', status: true },
      { name: '示例二', status: false },
      // 更多数据...
    ]
  };
}

这样，每一行的name旁边就会对应显示相应的图标了。如果状态改变，可以配合`v-bind:class`或自定义事件来动态切换图标样式。

el-table-column 添加图标

要在 `el-table-column` 中添加图标，可以使用 `scoped slot` 和 `el-icon`。

首先，在 `el-table-column` 中添加 `scoped slot`，例如：

<el-table-column label="操作">
  <template slot-scope="scope">
    <i class="el-icon-edit"></i>
  </template>
</el-table-column>

这样就添加了一个 `scoped slot`，在每个单元格中都会渲染一个编辑图标。你可以根据需要修改图标的类名。

如果你想在图标上添加点击事件，可以给 `i` 标签添加 `@click` 事件，例如：

<el-table-column label="操作">
  <template slot-scope="scope">
    <i class="el-icon-edit" @click="handleEdit(scope.row)"></i>
  </template>
</el-table-column>

这样就给图标添加了一个点击事件，点击时会调用 `handleEdit` 方法，并传入当前行的数据作为参数。你需要定义 `handleEdit` 方法来处理点击事件。