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`或自定义事件来动态切换图标样式。

相关问题

我想要vue的el-table表格的列多重排序的情况下对多个排序图标进行高亮显示

在 Vue 的 el-table 中，可以通过 `sort-change` 事件来监听表格的排序变化。当多列同时排序时，可以为每个排序条件设置一个唯一的 `sort-by` 属性，将这些属性保存在一个数组中。然后，通过计算属性来判断每个排序条件是否处于激活状态，并根据它们的顺序和方向来确定每个排序图标的样式。

下面是一个简单的示例代码：

<el-table :data="tableData" :sort-by="sortBy" :sort-order="sortOrder" @sort-change="handleSortChange">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column prop="score" label="Score"></el-table-column>
</el-table>

data() {
  return {
    tableData: [
      { name: 'John', age: 18, score: 90 },
      { name: 'Mary', age: 20, score: 85 },
      { name: 'Bob', age: 22, score: 95 },
      { name: 'Jane', age: 19, score: 80 },
    ],
    sortBy: ['score', 'age'], // 排序条件数组
    sortOrder: ['desc', 'asc'], // 排序方向数组
  }
},
computed: {
  sortIcons() { // 计算属性：判断排序图标样式
    const icons = []
    for (let i = 0; i < this.sortBy.length; i++) {
      if (this.sortBy[i] === this.$refs.table.store.states.sortProp) {
        icons.push(this.sortOrder[i] === 'asc' ? 'el-icon-arrow-up' : 'el-icon-arrow-down')
      } else {
        icons.push('el-icon-sort')
      }
    }
    return icons
  },
},
methods: {
  handleSortChange({ prop, order }) { // 排序变化事件处理函数
    const index = this.sortBy.indexOf(prop)
    if (index >= 0) { // 该列已排序
      this.sortOrder.splice(index, 1, order)
    } else { // 新增排序条件
      this.sortBy.push(prop)
      this.sortOrder.push(order)
    }
  },
},

在模板中，我们使用了 el-table 的 `:sort-by` 和 `:sort-order` 属性来指定排序条件和排序方向。在计算属性 `sortIcons` 中，我们根据当前表格的排序状态来判断每个排序图标的样式。具体来说，如果该列是当前的排序条件，则根据它的方向设置向上或向下箭头图标；否则，显示普通的排序图标。

在排序变化事件处理函数 `handleSortChange` 中，我们根据传递的参数 `prop` 和 `order` 来更新排序条件数组 `sortBy` 和排序方向数组 `sortOrder`。如果该列已经排序，则更新它的方向；否则，将该列添加为新的排序条件。

最后，我们需要在 el-table 中添加一个 `ref` 属性，以便在计算属性和事件处理函数中引用它：

<el-table ref="table" :data="tableData" :sort-by="sortBy" :sort-order="sortOrder" @sort-change="handleSortChange">
  <!-- ... -->
</el-table>

这样，当多列同时排序时，就可以根据它们的顺序和方向来高亮显示每个排序图标了。

<template> <el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110"></el-table-column> <el-table-column prop="ymatter" label="具体事项（原）" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column> <el-table-column label="具体事项（新）" prop="xmatter"> <el-table-column prop="point" label="考核要点"></el-table-column> <el-table-column prop="method" label="计分方法"></el-table-column> <el-table-column prop="target" label="考核目标" width="200"></el-table-column> </el-table-column> <el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50"></el-table-column> </el-table> </el-container> </template>给这个表格美化的显眼点

你可以尝试在表头中添加图标或者字体图标，让它更加显眼。例如，可以在考核指标列的表头单元格中添加一个 `el-icon-warning-outline` 的图标，表示这一列是比较重要的内容；在考核周期列的表头单元格中添加一个 `el-icon-date` 的图标，表示这一列是和日期相关的内容。同时，你也可以尝试添加一些过渡效果，比如当鼠标悬停在单元格上时，让单元格的背景色变化，增加一些交互效果。下面是一个例子：

<template>
  <el-container style="height: 100%">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110">
        <template slot="header">
          <i class="el-icon-warning-outline"></i>
          考核指标
        </template>
      </el-table-column>
      <el-table-column prop="ymatter" label="具体事项（原）" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column>
      <el-table-column label="具体事项（新）" prop="xmatter">
        <el-table-column prop="point" label="考核要点"></el-table-column>
        <el-table-column prop="method" label="计分方法"></el-table-column>
        <el-table-column prop="target" label="考核目标" width="200"></el-table-column>
      </el-table-column>
      <el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50">
        <template slot="header">
          <i class="el-icon-date"></i>
          考核周期
        </template>
      </el-table-column>
    </el-table>
  </el-container>
</template>

<style>
  .el-table__row:hover {
    background-color: #f5f5f5;
  }
</style>

这个例子中，我们在考核指标列和考核周期列的表头中分别添加了一个图标和文字，让它们更加显眼。同时，在 CSS 中定义了当鼠标悬停在单元格上时，单元格的背景色变成浅灰色，增加了一些过渡效果。你可以根据需要修改图标和颜色等样式，或添加其他交互效果。