[Bug Report] table 固定列导致样式冲突,因为使用了 .is-hidden
- Dominant language
- Vue
- Stars
- 54k
- Forks
- 14.4k
- PR merge metrics
- No merged PRs in 30d
Description
### Element UI version
2.15.14
### OS/Browsers version
win10 / Chrome 版本 135.0.7049.115(正式版本) (64 位)
### Vue version
2.7.16
### Reproduction Link
https://codepen.io/ixing7/pen/PwwdBwQ
### Steps to reproduce
1. 环境 vue2 elementUI ; 使用 table 固定左列 (可使用官方文档的示例: https://codepen.io/pen?&prefill_data_id=83b97f0f-9bc6-4adf-b5c1-bcbbce0f353d )
2. 问题重现: 增加引入 bulma.css (例如使用cdn : @import url("//cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css");)
问题现象:
1. 固定列的右侧列会被覆盖,
2. 数据行可能会错位
问题分析:
1. 初步分析是样式冲突导致: bulma 代码: https://github.com/jgthms/bulma/blob/master/css/bulma.css
2. 其中包含了 .is-hidden { display: none !important; }
3. elementUI中的 固定列样式 也有 is-hidden ,导致冲突隐藏了
4. 是否有其他冲突 我暂未深入研究比对
### What is Expected?
期待: 与官网demo表现一致
期待修复:
1. 修改 is-hidden 类名为专有类名 比如: el-is-hidden
2. 或增加修复 .el-table__cell.is-hidden { display: table-cell !important;}
### What is actually happening?
1. 固定列的右侧列会被覆盖, 数据行错位错位
2. 导致问题排查困难 希望修复
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.