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

属性

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


// 表格整行背景色闪烁
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

你可能感兴趣的:(element)