vxe-table制作高亮刷新功能

start

记录一下 vxe-table 实现表格新增数据背景闪烁功能。

1. 效果

2. demo代码

<template>
  <div id="app">
    <div @click="tomato">点我新增数据 lazy_tomato</div>
    <vxe-grid ref='xTable' :height="height" :columns="columns" :data="data" :scroll-y="{ enabled: true }"
      :row-class-name="getRowClassName" :row-config="{ keyField: 'id', useKey: true }">
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    let that = this
    return {
      border: true,
      height: 500,
      columns: [
        { type: 'seq', width: 50 },
        { field: 'name', title: 'Name' },
        { field: 'sex', title: 'Sex', showHeaderOverflow: true },
        { field: 'address', title: 'Address', showOverflow: true },
      ],
      data: [],
      rowClassName ({ row }) {
        let index = that.list.indexOf(row.id)
        if (index !== -1) {
          return 'animating'
        }
        return ''
      },
      list: []
    }
  },
  mounted () {
    const list = []
    for (let index = 0; index < 700; index++) {
      list.push({
        name: `名称${index}`,
        id: index,
        nickname: 'T1',
        role: 'Develop',
        sex: 'Man',
        age: 0,
        address: 'Shenzhen',
      })
    }
    this.data = list
  },
  methods: {
    getRowClassName ({ row, rowIndex }) {

      let a = row.isAnimating ? 'animating' : '';

      if (rowIndex === 0) {
        a = a + ' ' + new Date().getTime()
      }
      return a
    },
    tomato () {
      let length = 2
      console.log(length)
      let a = new Date().getTime()
      let newRows = []
      for (let index = 0; index < length; index++) {
        newRows.push({ // 你的数据结构
          id: a + 'tomato' + index,
          name: '随机数据' + a + index,
          // 添加动画标识
          isAnimating: true
        })
      }


      this.data.unshift(...newRows);

      // 遍历每条新数据，设置定时器移除动画标识
      setTimeout(() => {
        newRows.forEach((row, index) => {
          row.isAnimating = false;
        });

        newRows = null
      }, 2000);  // 动画时间为2秒，设置适合的间隔


    }
  }
}
</script>
<style>
@keyframes fadeToWhiteRGBA {
  0% {
    background-color: pink;
  }

  /* 接近白色的淡蓝色 */
  100% {
    background-color: #fff;
  }

  /* 白色 */
}

.animating {
  animation: fadeToWhiteRGBA 2s linear;
}
</style>

3.难点说明

3.1 动画实现

最简单的还是使用css的animation属性，实现动画效果即可，当元素加载时会播放动画。在vue等框架中，组件更新也会重新渲染dom更新动画。

3.2 vxe-table首行不更新动画

在我自己实现功能的时候，发现首行的样式不会更新，排查了一下原因，可能是和 vue的diff算法有关，需要给虚拟节点 vnode增加一个key，标志组件唯一即可。（加上如下配置）

:row-config="{ keyField: 'id', useKey: true }"

3.3 vue-table 虚拟滚动失效

在使用vue-table的时候，发现虚拟滚动失效了，后面发现这几个原因，记录一下

1. 要设置高度或最大高度。
2. 是否开启了虚拟滚动
3. 如何和树状效果一起使用，tree-config:{}，不能等于空对象。