ElemeFE / ElemeFE/element

[Bug Report] table 固定列导致样式冲突,因为使用了 .is-hidden

Open
#23,075 0 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.