el-table:el-table-column拿到每一行的index

4,695 阅读1分钟

场景:el-table-column中满足条件的添加未读红点提醒,前提是后端返回了相应字段字段

如图:

image.png

<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;