element-ui el-tabs组件中el-table列宽度闪屏问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
问题
element-ui框架,当tabs中有table组件的时候,点击tabs的标签时,table组件存在列宽从小变大的有闪屏现象
问题原因
导致这个问题的原因有两个:
- el-table组件的子级容器el-table__header、el-table__body有初始的默认宽度,不是100%而是一个具体的像素宽度,导致无法撑满,
- 是因为手动设置列宽导致的:如
<el-table-column label="操作" width="120">,因为表格默认有个宽度计算,如果手动设置了某个或某几个列宽,并且也没有全部设置,就会导致el-table重新计算其他列的宽度,重绘表格布局。
解决办法
- 在外部样式表中给el-table、el-table__header、el-table__body设置样式
width: 100% !important;强制覆盖默认样式 - 列宽要么全部手动设置(建议使用百分比),要么全部不设置。
(注:如果想只部分设置解决这个问题除非去改el-table的实现,但不建议,这种做法破坏性很大,导致框架可移植性变差)
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)