vue element 表格排名
先上效果图
步骤
- 首先后台将数据排好传给前台 ,方便了前台不用二次转换;
2.前台将数据放入表格,其中最前的排名通过 type=“index” 实现 ;
<el-table-column type="index" align="center" :resizable="false" label="名次" width="100">
- 将排名前三的进行特殊化
<template slot-scope="scope">
<span v-if="scope.$index+1 ==1"><img class="manImg" src="../../assets/11.png"></img></span>
<span v-else-if="scope.$index+1 ==2"><img class="manImg" src="../../assets/22.png"></img> </span>
<span v-else-if="scope.$index+1 ==3"><img class="manImg" src="../../assets/33.png"></img> </span>
<span v-else class="no">{{scope.$index+1}} </span>
</template>