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 = thisreturn {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 = 2console.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:{}，不能等于空对象。