vue-seamless-scroll使用中遇到关于click的问题

使用vue-seamless-scroll实现数据无缝连续滚动

https://blog.csdn.net/weixin_43254676/article/details/94025887

原理
基本原理是把要滚动的部分复制一份，滚动这两部分相同的内容，进而实现无缝连续滚动

遇到的问题
当ul1中的数据未滚动完时,ul2 部分的click事件不起作用，无法实现功能

（此时可见区域内一部分数据为ul1，一部分数据为ul2）

简单分析
第二部分无法操作和js的运行机制有关，需要重新绑定事件，具体原理也是一知半解，但是大致感觉问题是由于重复渲染，相同的部分绑定的事件不能同时运行，需要换个思路。当时同学提到了 js事件委托，需要好好了解一下。
事件委托、
事件委托
阮一峰老师的js运行机制了解一下
事件委托依靠的就是事件冒泡和事件捕获的机制

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

所谓的事件委托就是通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。

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

获取到event 和 event.target如下

获取到了button之后，因为接下来的操作还需要用到ID和name，所以要给button绑定属性

id和name是button自带的属性，vue中自定义属性时还需要添加前缀 data- 获取时要加 dataset

控制台打印数据如下

现在获取到了所有想要的数据 和 要响应的事件，接下来执行事件即可。

代码如下：

 <div class="m_tableContent m_gasMonitoring" @click="handleClick($event)">
    <div class="m_tableTitle">
      <ul>
        <li>编号</li>
        <li>员工姓名</li>
        <li>一氧化碳(ppm)</li>
        <li>甲烷(%)</li>
        <li>氧气(%)</li>
        <li>温度(℃)</li>
        <li>湿度(%)</li>
        <li style="width: 30%">地点</li>
        <li>操作</li>
      </ul>
    </div>
    <vue-seamless-scroll :data="listData" :class-option="classOption" class="seamless-warp">
      <ul v-loading="loading" class="item seamless-table">
        <li v-for="(item,index) in listData" :key="index" class="seamless-row">
          <p class="m_rowItem ">{{ item.sequenceId }}</p>
          <p class="m_rowItem">{{ item.staffName }}</p>
          // 部分省略
           <p class="m_rowItem">
            <button :id="item.staffId" :name="item.staffName" :data-dept="item.deptName" type="danger" class="el-button el-button--danger el-button--mini is-plain" plain size="mini">呼叫</button>
          </p>
        </li>
      </ul>
    </vue-seamless-scroll>
      </div>
</template>
<script>
export default {
name: 'GasMonitorTable',
  methods: {
    handleClick(event) {
      console.log(event)
      console.log(event.target)
      this.staffInfo.staffId = event.target.id
      this.staffInfo.staffName = event.target.name
      this.staffInfo.deptName = event.target.dataset.dept
      this.handlePhoneStaff()
    }
}
}
</script>

原文链接：https://blog.csdn.net/weixin_43254676/article/details/94025887