Swipe左右切换和el-table的滚动冲突问题

Question

使用el-table固定一列后其他列滚动显示。
使用Swipe切换内容时，碰到table里滚动会出现table滚动和Swipe一起滚动的情况。
现在思路就是el-table滚动时阻止冒泡事件，触摸固定列时才切换Swipe。
但不知道怎么下手。大家有什么解决思路嘛？

补充了图示：
当前:滑动table（白色框）里滚动内容swipe组件（绿色）也会跟着滑动
目标：滑动table，swipe不动

Answer 1

我记得 Swiper.js 里有一个 api 是控制父子嵌套的，内部如果有子元素可以滚动的话不会触发外层 Swiper的切换，具体哪个 api 想不起来了，你可以找找看。

不过刚刚翻文档倒是找到了一个 noSwiping 的 api，你可以看看这个文档试试看。 👉 noSwipingSelector_Swiper参数选项

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

可以尝试在table的滑动事件上加入阻止冒泡的代码event.stopPropagation()

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

这个因该是swiper的bug或者考虑不周全造成的，可以参考下react-swipeable-views的实现思路，每次出发滑动事件是判断一下这次滚动是归谁管如果，是归swiper管的话他就滚动，否则就就交给浏览器的默认行为
原理，判断event.target如果是swiper容器就由swiper接管本次滚动
如果不等于就沿着event.target向上获取swiper容器内，scrollWidth > clientWidth的元素（实际宽度大于视口宽度的元素，也就是可以滚动的元素），判断用户此次用户的操作是否是向前或者向后滚动，且还没有滚动到可滚动元素的最左边或者最右边，如果是就交给浏览器的默认滚动行为

预期效果:
swiper中有滚动元素时会优先处理swiper内部可滚动元素的滚动，然后才是swiper的滚动
https://react-swipeable-views...

相关实现
(1) 向上寻找可滚动元素:
https://github.com/oliviertas...

(2) 判断是否该优先处理native滚动
https://github.com/oliviertas...

Answer 4

已解决，分享如下：

起初增加了swiperOption 的判断：

swiperOption: {
        noSwiping: true,
        noSwipingSelector: 'tr>td:not(:first-child)'
      },

在pc端预览没有问题。
但在移动端el-table的体验并不友好，表现为滑动时抖动、可拖拽、滚动不同步等。

后来觉得弃用el-table，改用swiper实现数据滚动。
滚动的表头和内容各使用一个swiper，并用controller控制同步滚动。同时将这些内容放入新的一个swiper用于切换tabs。在移动端表现顺滑流畅很是健壮。

感谢大家回复，并提供解决思路。