今天主播在敲代码的时候翻了车。
起因是这样：我们要在移动端展示一个列特别多的表格，要求能横向滑动，乍一听不难嘛，用个 overflow-x: auto，加个 min-width，完事！
然而！这个表格它不是普通的表格，它被封印在了一个 swiper-item 里。
讲人话就是：你想在里面左右滑动表格，但人家 swiper 爸爸已经绑定了横向滑动的专利！你滑一下，Swiper： “嗯？你在划我？” 然后表格还没滑，整页就切到下一个 swiper-item 了。
这个时候主播我陷入了沉思：
你说滑动本是人类的天性，谁想到表格居然跟 swiper 打起来了？
于是开启了排查模式：
- ✔ 是不是没加
overflow-x？不是，加了。 - ✔ 是不是 table 宽度太短？不是，
min-width: 1000px都给上了。 - ❌ 是不是 swiper 抢了 touch 事件？很有可能！
🎯 解决方法：swiper 和 table 划清边界！
经过一番 Debug 和灵魂拷问，终于找到了解法的真谛：
<swiper-item>
<div class="scroll-x-wrapper" @touchstart.stop @touchmove.stop>
<table class="wide-table">
<!-- 表格内容 -->
</table>
</div>
</swiper-item>
.scroll-x-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wide-table {
min-width: 1000px;
}
✨ 精髓解释：
@touchstart.stop @touchmove.stop
你 swiper 牛，但在我表格面前你也得让一让。
这几行代码的作用是阻止 swiper 抢走横向滑动事件，让表格自己处理滑动，完美实现左右滚动的效果，互不干扰，和平共处。
✅ 总结：
表格横滑 + swiper 的组合，确实会让人头秃。但只要记得：“触摸事件的归属问题”是关键，拦住 swiper 的事件，就能让你的表格安心滑动。
主播今日翻车，但也算是趟坑出道。
如果你也遇到 swiper 不让你滑表格的情况，不妨试试这个方案～
🧩 适用场景
- 表格列很多，移动端无法完全展示
- 希望用户通过拖动查看更多字段
- 避免复杂组件引入，轻量级展示方案
🎯 关键点说明
| 点位 | 说明 |
|---|---|
min-width | 让 el-table 保持至少一定的宽度，超过容器宽度可滚动 |
overflow-x: auto | 控制横向滚动的出现时机 |
| 响应式 | 可结合 vw / rem 或媒体查询自适应展示 |
