vue表格内循环添加成功失败的图标

你可以在 `vue` 表格循环渲染每一行的时候，根据数据中的某个字段来判断是否显示成功或失败的图标。以下是一个简单的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <span v-if="item.status === 'success'">
              <i class="fa fa-check-circle" style="color:green"></i>
            </span>
            <span v-else-if="item.status === 'failed'">
              <i class="fa fa-times-circle" style="color:red"></i>
            </span>
            <span v-else>
              <!-- 如果状态不是 success 或 failed，就显示空白 -->
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', status: 'success' },
        { id: 2, name: 'Jane', status: 'failed' },
        { id: 3, name: 'Bob', status: 'pending' }
      ]
    }
  }
}
</script>

在这个示例中，我们使用了 `v-if` 和 `v-else-if` 来根据 `item.status` 的值来决定是否显示成功或失败图标。当 `item.status` 的值为 `success` 时，我们显示一个绿色的勾号图标；当值为 `failed` 时，显示一个红色的叉号图标。如果 `item.status` 的值既不是 `success` 也不是 `failed`，则不显示任何图标，只显示一个空白的占位符。