el-table某行闪烁

在项目开发中，有一个需求，就是接口返回表格数据后，记录第一行的某个值，等数据再来时进行对比，发现不一致，让这行闪烁，闪烁五秒后取消闪烁
 

 思路：以表格数据时间字段为例.

记录第一次的时间，数据再来时对数据的时间进行对比，不一致给其加一个变色的属性bool值，然后使用el-table的属性:row-class-name，利用动画animation进行闪烁。

<el-table

            ref="tablea"

            :data="dataarray"

            :row-class-name="tableRowClassName"     

          >

</el-table>

<script>

export default {

  data () {

        return {

                        dataarray:[],

                        firstTime:''，//第一次的时间

                        flashingTimeout: null,//闪烁消失时使用

                    }

           },

  mounted () {

       this.tablePostList()

      setInterval(() => {

          this.tablePostList()

      }，30000）

      }，

  methods: {

        //接口调用，方法是30秒调用一次，写了个定时器

        tablePostList(){

        this.$axios({

        method: '',

        url: '',

        data: {

        },

      }).then(res => {

                let dataList = res.result.list?res.result.list:[];              

                 dataList.forEach(item => {

                       if (this.firstTime &&item.occurTime > this.firstTime) { // 比较时间

                             item.isBigTime = true; // 标记需要变色 

                       }

                 });

             if (res.result.total > 0) {//判断页数大于0，也就是返回数据有值

                 this.firstTime = dataList[0].occurTime; // 更新最大时间           

            }

            this.dataarray=dataList;

        },

 //  表格斑马纹

    tableRowClassName({ row, rowIndex }) {

        if (row.isBigTime==true) {

        //定时器5秒

          this.flashingTimeout = setTimeout(() => {

            row.isBigTime= false;

            clearTimeout(this.flashingTimeout);

            this.flashingTimeout=null

          }, 5000);

        return 'big-time-row';

      } else {

        return '';

      }

    },

 },

 }

</script>

<style>

 .big-time-row{

/*flashing 动画名字     infinite 不间断执行*/

  animation: flashing 1s infinite !important;

  }

/* 刚开始为0%，时间到50%时变色，到100%又变颜色，形成一个闪烁的情况*/

  @keyframes flashing {

  0% {

    background-color: #5e8ef199;

  }

  50% {

    background-color: rgba(255, 255, 255, 0.5);

  }

  100% {

    background-color: #5e8ef199;

  }

}

</style>