如果想用无限循环滚动条(vue-seamless-scroll)的点击行事件 @click="handleButton($event)",务必在里面的每一列的span里都加上 :data-obj="JSON.stringify(item)"
反之,如果只想点击某一列里的字段,只需要在该列的span里加 :data-obj="JSON.stringify(item)" 即可。
使用vue-seamless-scroll写点击行事件的表格:
<!-- 表头 -->
<div class="warp-title">
<ul class="item">
<li>
<span class="date" style="width: 160px">时间</span>
<span style="width: 75px">姓名</span>
<span style="width: 100px">地点</span>
</li>
</ul>
</div>
<!-- 表格滚动区 -->
<div @click="handleButton($event)">
<vue-seamless-scroll :style="{height: this.scrollHeight + 'px' }" :data="personData"
:class-option="defaultOption" class="warp-content">
<ul class="item">
<li v-for="(item, index) in personData" :style="{backgroundColor:((index+1)%2 == 0) ? 'transparent' : 'transparent'}" :key="index">
<span style="width: 160px;text-align: center;" v-text="item.checktime" :data-obj="JSON.stringify(item)"></span>
<span style="width: 75px;text-align: center;" v-text="item.name" :data-obj="JSON.stringify(item)"></span>
<span style="width: 100px;text-align: center;" v-text="item.campaddress" :data-obj="JSON.stringify(item)"></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
点击事件的方法:
handleButton(e) {
let InfoAnync = JSON.parse(e.target.dataset.obj)
cosnole.log(InfoAnync,' =====> InfoAnync')
}
上述的InfoAnync就可以取到点击行的数据,后续引用即可