el-table-column 添加动态icon

在使用Element UI的`el-table-column`组件时，如果你想根据数据动态添加图标（icon），可以通过`formatter`属性来实现。`formatter`属性允许你定义一个函数，该函数会在数据渲染到列中之前被调用，你可以在这个函数中返回任何你想要渲染的HTML内容。

下面是一个简单的例子，展示如何在`el-table-column`中添加动态图标：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template slot-scope="scope">
        <!-- 使用formatter来动态生成内容 -->
        <i class="iconfont" :class="scope.row.statusIcon"></i>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        // 状态图标类名，例如："icon-success"，"icon-fail"
        statusIcon: 'icon-success'
      }, {
        date: '2016-05-04',
        name: '张小刚',
        statusIcon: 'icon-fail'
      }]
    };
  }
};
</script>

<style>
/* 样式示例，根据实际情况引入对应的字体图标库 */
.iconfont {
  font-size: 18px;
}
/* 根据状态定义不同图标样式 */
.icon-success {
  color: green;
}
.icon-fail {
  color: red;
}
</style>

在上面的代码中，`icon-success`和`icon-fail`是示例性的类名，你需要根据实际使用的图标库来定义相应的类名。`formatter`属性没有直接使用，而是通过`<template slot-scope="scope">`的形式来自定义列内容，并通过`scope.row.statusIcon`动态绑定图标类名。