el-table自定义序号为icon或者其他元素

在table最前面加上一列

      <el-table-column
          type="index"
          width="50"
          label="序号"
          :index="indexMethod">
      </el-table-column>

method:

    indexMethod(rowIndex) {
      let color;

      if (rowIndex === 0) {
        color = "#ffcc00";
      } else if (rowIndex === 1) {
        color = "#d9d9d9";
      } else if (rowIndex === 2) {
        color = "#ad6800";
      }

      if (color) {
        const props = {
          style: { color: color },
          class: "el-icon-trophy-1",
        };
        return <i {...props} />;
      }
      return ++rowIndex;
    },

返回图片:

indexMethod(rowIndex) {
  if (rowIndex === 0) {
    return <img src="images/img_gold_medal.png" style="width: 95%;" />;
  } else if (rowIndex === 1) {
    return <img src="images/img_silver_medal.png" style="width: 95%;" />;
  } else if (rowIndex === 2) {
    return <img src="images/img_bronze_medal.png" style="width: 95%;" />;
  }
  return ++rowIndex;
},

图片地址放在public目录下在这里插入图片描述

icon:
在这里插入图片描述
图片:
在这里插入图片描述

posted @   小匠i  阅读(132)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示