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 @ 2022-11-11 20:46  小匠i  阅读(148)  评论(0)    收藏  举报