前言
vue2 项目中使用vue-seamless-scroll,复制出来的数据点击无效,经过多方查找总结,终于解决问题了,写篇文章防止下次遇到
参考文章:
vue-seamless-scroll 点击click失效
【vue】vue-seamless-scroll点击事件失效
关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效
vue-seamless-scroll 滚动插件的使用及循环的列表点击事件不生效的解决方案
vue2项目中如何使用vue-seamless-scroll依赖,参考之前发布的文章:
【vue】 vue-seamless-scroll 无缝滚动依赖
解决
使用此组件,第二轮数据点击事件失效,采用事件委托解决,父元素绑定一个点击事件@click='clickup($event)'
,子元素添加JSON.stringify(item)
即当前行数据
<template>
<div
class="maintable"
@click="clickup($event)"
v-if="datalist && datalist.length > 0"
>
<vue-seamless-scroll :data="datalist" :class-option="listOption">
<div class="onebox" v-for="(item, index) in datalist" :key="index">
<div class="name" :title="item.xm">{{ item.xm }}</div>
<div class="phone">{{ item.enSjh }}</div>
<div class="cardnumber">
{{ item.enSfzh }}
<!-- {{ item.cardnumber | jmsjh }} -->
</div>
<div class="record" :data-obj="JSON.stringify(item)">
<!-- :data-obj="JSON.stringify(item)" 传递参数 -->
追踪记录查看
</div>
</div>
</vue-seamless-scroll>
</div>
</template>
点击事件
clickup(e) {
// 使仅点击按钮触发点击事件
let row = JSON.parse(e.target.dataset.obj); // 传递参数
console.log(row,"当前行数据")
},
下班~