vue中使用el-table设置排名前三用金银铜的图标展示，其余排名正常展示

实现效果：

实现方式：

<el-table
					:data="tableData"
					:header-cell-style="{ color: 'rgba(255,255,255,1)', textAlign: 'center' }"
					:cell-style="{ textAlign: 'center' }"
				>
					<el-table-column label="排名" type="index" width="57px">
						<template scope="scope">
							<span class="index_common" v-bind:class="[scope.$index + 1 == '1' ? 'index_one' : scope.$index + 1 == '2' ? 'index_two' : scope.$index + 1 == '3' ? 'index_three' : '']">
								{{ scope.$index + 1 }}
							</span>
						</template>
					</el-table-column>
				</el-table>

 重点在于排名的el-table-column中设置三目运算符，将前三名与其他排名设置区分。

在表格的css样式中：

		.index_one {
			color: #fec412;
			background-image: url(~@/assets/images/gold.png);
		}
		.index_two {
			color: #b4c0c7;
			background-image: url(~@/assets/images/silver.png);
		}
		.index_three {
			color: #714e3a;
			background-image: url(~@/assets/images/copper.png);
		}

分别设置前三行的背景图片，由于序号1,2,3会显示，故将其分别设置为金银铜的颜色。这样就实现了在vue中将前三名分别设置为金银铜不同展示形式的展示效果。