element ui的el-table的row-class-name属性挂载表格行样式的问题

属性

row-class-name：行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
代码：

<el-table ref="singleTable" :data="tableData" :row-class-name="tableRowClassName">
// 表格整行背景色闪烁
tableRowClassName ({row, rowIndex}) {
	if (row['confirm'] === '0') {
		// 未确认
		return 'bling-row'
	}
}
/* 表格背景颜色闪烁 */
.el-table .bling-row {
  animation: bgflash 1s infinite;
}
@keyframes bgflash {
  50% {color: #f56c6c;}
}

问题：
如上给表格挂载行背景闪烁的效果时，当第一页10条数据，第二页4条数据，查看第二页后查看第一页数据，前4条和后6条背景闪烁动画不同步。
原因：
通过F12查看节点，翻页时，从第二页往前翻页，前四条数据的标签并没有重新渲染。
导致，前4条按照之前的节奏闪烁，后6条按照翻页时间点开始闪烁。
由此可见后6条数据连同重新渲染，重新添加了样式bling-row，所以动画从头开始。
如需要前4条数据重新渲染，只需在每次翻页查询数据赋值时，先将表格数据集置为空即可。
代码如下：
// 翻页请求时注意加上置空处理即可
this.tableData = [] // 请求前先置空表格数据
this.tableData = res.data.page.list