tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
16.31k stars 1.68k forks source link

Data Table 组件“固定头部和列”的情况下在触摸的时候有BUG #3575

Closed aloneqi closed 2 years ago

aloneqi commented 2 years ago

TuSimple/naive-ui version (版本)

2.32.2

Vue version (Vue 版本)

3.2.37

Browser and its version (浏览器及其版本)

Edge (104.0.1293.63)

System and its version (系统及其版本)

window10

Node version (Node 版本)

Reappearance link (重现链接)

https://www.naiveui.com/zh-CN/os-theme/components/data-table#fixed-header-column.vue

Reappearance steps (重现步骤)

官网data-table组件的 固定头部和列 内容下点击F12选择切换设备仿真横屏模式,触摸滑动thead的头部内容时,tbody内容无法跟随滑动

Expected results (期望的结果)

触摸滑动thead时,tbody内容能跟随滑动,或者像antd ui那样在 固定头部和列 的情况下阻止thead头部内容的滑动

Actual results (实际的结果)

因为我现在做的是一个类似美团点单系统的项目,所以是有触摸的情况的,无意中发现了这个BUG,虽然是一个小缺陷,但能期待更好

Remarks (补充说明)

aloneqi commented 2 years ago

可用使用样式强行覆盖 .n-data-table .n-data-table-base-table-header 里面的 overflow: scroll;就可以让thead的头部内容无法滚动,打扰了