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:
图片: