场景:el-table-column中满足条件的添加未读红点提醒,前提是后端返回了相应字段字段
如图:
<el-table-column
label="序号"
type="index"
sortable>
<template slot-scope="scope">
<span>{{ scope.$index + 1 }}</span>
<i v-show="scope.row.isWarn == '1'" class="redDot"></i>
</template>
</el-table-column>
红点样式如下:根据距离自己调
.redDot{
border-radius: 5px;
background: #f00;
width: 5px;
height: 5px;
position: absolute;
top: 1.5em;
right: 5em;
}
注意:尝试使用slot-scope="{row,index}"解构,没有index这个结构;$index从0开始显示的,需要序号显示+1;