Feature/sticky #1696
Feature/sticky #1696
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/tusimple/naive-ui/293WUA432P6RCPwTbnZErpELd8Uj [Deployment for 72baa09 failed] |
Codecov Report
@@ Coverage Diff @@
## main #1696 +/- ##
==========================================
- Coverage 64.88% 64.76% -0.12%
==========================================
Files 886 886
Lines 17198 17255 +57
Branches 4072 4089 +17
==========================================
+ Hits 11159 11176 +17
- Misses 5278 5307 +29
- Partials 761 772 +11
Continue to review full report at Codecov.
|
|
这个 sticky 是否存在条件限制？比如说某些 props 组合下不生效之类的 |
|
这块 border 有没有可能跟着下面的一起合并了，变成一条线 |
调整一下 |
这个我可以晚点详细测试一下。文档里的例子试一遍 试了一下现在固定头部和列这个例子还有点问题，看起来是 |
想到一个解决办法是，给 |
这样在 border radius 比较大的时候应该不太行，可以再花时间考虑考虑，如果有可能是最好的 |
用 |
2021-11-30.4.13.51.mov |
|
顺便 fix 了：#1712 |
JerryChan31
force-pushed
the
feature/sticky
branch
from
d298730 to
07a3c5b
Compare
这效果感觉看着很🐮 |
|
圆角有问题的那个 issue 感觉还没那么简单，需要考虑的 case 很多，我先把那个框子 dom 的 overflow 弄成 hidden 了，这样可以保证 work。 在这个提交里 b00ee42 我感觉可能会影响你的调整（sticky 的判定），如果确实产生问题的话就只能用比较复杂的情况来给每个需要 radius 的地方都加上了 radius 了（我试了试感觉有四五种 case，还不能光靠 css） |
确实会影响，哈哈。 没关系，慢慢调整到满意为止就好~ 可以大概说一下有哪些case需要考虑吗？再改的时候可以把这些考虑上。 |
大概是这几点： table 会根据不同的情况选择是否拆分 DOM，比如 auto layout 或者非 fix layout，fix header 或者 column 都会影响到 table DOM 结构 有的时候是切了上下，有的时候是一个整体但是放在 n-scrollbar 里面，有的时候是一个整体也不套 n-scrollbar。 这样的影响就是在不同的 case 下需要调整的 DOM 不一样，比如切了上下我们要对左上角，右上角，左下角右下角各自调整 放在 scrollbar 里面的时候感觉 sticky 就没有可能生效了 = =... 最后的 case 倒是简单点，但是触发的条件很苛刻
header 和 body 挂在一个 table 的前提是“非 flex height 并且没有 max height” body 里面分可以滚和不可以滚，包滚动条的有“有 scrollX 或者有 maxHeight 或者 flexHeight“，以及“是一个最基本的 auto layout”，这种情况下就是虽然什么都没设定我也让 table 要能滚，这是给用户开个口子让最基本的 table 在溢出后可以滚（我也不知道这个好不好）。 这里面就涉及不同情况下 DOM 的调整了，感觉好像全都覆盖是有点苛刻 目前看来就是如果全都被放在滚动条里的话，sticky 应该非常难实现，因为这个需要 table overflow visible 实现可能性比较大的就是头和主体分离的（但是这种情况如果要处理 border radius 需要精确到单元格的 border radius 定位，还要考虑跨行列的情况，肯定要在 JS 层计算出来然后做一些 class 的标记），或者没有被包上滚动条的 |
JerryChan31
force-pushed
the
feature/sticky
branch
2 times, most recently
from
0c101b5 to
db1f138
Compare
|
@JerryChan31 is attempting to deploy a commit to the Tusimple Team on Vercel. A member of the Team first needs to authorize it. |
|
之前有点忙，搁置了一下这个PR，现在闲下来打算继续搞，eslint好像遇到了点问题，本地npm run lint:fix没有报错，但是在ci里会报错……我先研究一下怎么恢复到跟主干分支一样… |
rebase 一下就行 |
n-table新增sticky属性，关闭 #1555。Closes 表格能否加个表头随页面滚动固定表头 #1555 DataTable header does not take DataTable border radius into account and overlaps #1712