vue-seamless-scroll 的click不触发问题_vue-seamless-scroll中el-table二轮点击不生效

因为需要做一个无限滚动的table效果，然后百度了一下，看到网上挺多用 vue-seamless-scroll 的，然后自己就用了。后面一些问题给大家总结下。

使用很简单，这里就不阐述了，主要讲下用这个的一些业务要求，遇到的问题。

无限滚动原理：无限滚动的原理就是把之前的遍历的内容复制一份，滚动这两部分内容，达到无缝滚动效果。

需求：首先需要一个这样的需求，才能碰到这个问题（通过点击列展示详情数据）

遇到的问题一：
当第一个ul中的数据滚动完时,第二个ul 部分的click事件不起作用，无法实现一些点击这行，弹窗详情信息业务需要功能。

简单分析
第二部分无法操作和js的运行机制有关，需要重新绑定事件，具体原理也是一知半解，但是大致感觉问题是由于重复渲染，相同的部分绑定的事件不能同时运行，需要换个思路。当时同学提到了 js事件委托，需要好好了解一下。
1 . 事件委托
2. JavaScript 运行机制详解：再谈Event Loop

解决问题
这是之前的写法（可以循环显示，点击第一个ul可以触发clickProps 事件，但是点击第二个复制的ul不能触发clickProps事件）部分截图

下面是更改后的代码

1. 给外层div加点击事件，通过event.target获取到点击的dom元素

<div class="seamless-warp" @click="clickProps($event)"></div>
1

2. 给点击的列的元素绑定 属性，这里我绑定了id和自定义属性data-obj对象，直接把改列的item添加进去，不用一个一个单独绑定。

<span class="table-li"  :data-obj="JSON.stringify(item)" :id="index+1">
	{{index+1}}
</span>
1
2
3

3. 通过点击事件的 clickProps 的 e.target 获取数据

 clickProps(e) {
    console.log(e.target);
    let index = e.target.id;
    let item = JSON.parse(e.target.dataset.obj);
 }
1
2
3
4
5

打印的 e.target

然后就可以解决了 vue-seamless-scroll 滚动，点击复制的ul click不触发的问题。