VUE 表格动态滚动导致点击事件失效问题

HTML： 

<div id="tableBox"><div id="table1"><divv-for="(item, index) in list":key="index"@click="hanldeClick(item)"><-- 不重要的row --></div></div><div id="table2"></div>
</div>

 JS：

// 渲染完成调用
setTimeout(() => {let c1 = document.getElementById("table1");let c2 = document.getElementById("table2");c2.innerHTML = c1.innerHTML;// 绑定点击事件for (let i = 0; i < c2.childNodes.length; i++) {c2.childNodes[i].addEventListener("click", () => {this.hanldeClick(this.list[i]);});}
}, 0);

// 表格行点击事件
hanldeClick(val) {console.log(val);
},

CSS:

#tableBox{height: 300px;width: 100%;overflow: hidden;
}
#table1,
#table2{margin: auto;animation: move 10s linear infinite;
}
@keyframes move {from {transform: translateY(0);}to {transform: translateY(-100%);}
}

如需悬浮暂停滚动,，加上：@mouseover="mouseover" @mouseleave="mouseleave"

<div id="table1" @mouseover="mouseover" @mouseleave="mouseleave">...</div>
<div id="table2" @mouseover="mouseover" @mouseleave="mouseleave"><div>

// 鼠标悬浮
mouseover() {let c1 = document.getElementById("table1");let c2 = document.getElementById("table2");c1.style.animationPlayState = "paused";c2.style.animationPlayState = "paused";
},
// 鼠标离开
mouseleave() {let c1 = document.getElementById("table1");let c2 = document.getElementById("table2");c1.style.animationPlayState = "running";c2.style.animationPlayState = "running";
},