太坑了，百度了所有都找不到的答案，elementui的table的多级表头固定前n列的问题太坑了，百度了所有都找不到

【太坑了，百度了所有都找不到的答案，elementui的table的多级表头固定前n列的问题】废话不多说，先看效果如下，我固定的是前三列，复杂表头渲染，是我前一章节说的（https://segmentfault.com/a/11...）

文章图片

1、elementui的table的多级表头固定前n列（注意：n列是根据width来固定的）的问题所在

1.1 发现给了el-column固定宽度，和fixed属性后，其他没有这两个属性的el-column部分被加上了is-hidden的类名（这个要浏览器控制台查看html结构代码才知道），导致页面渲染的数据被隐藏了，所以要想办法去掉这个类名 1.2 经过查看html结构后，使用jquery去掉is-hidden类名（没有想到更好的办法，有其他办法的大神希望能点拔我一下）

2、解决的办法：

2.1 核心代码：

this.$nextTick(() => { // 如果不是固定列用这个 let myTrList = $('.kingChangeHead .el-table__header .has-gutter tr'); // 第一行表头（表头的样式） let colorTr = myTrList.eq(0); let colorTh = colorTr.find('th').eq(0); $(colorTh).removeClass('is-hidden'); $(colorTh) .find('.cell') .css({ color: '#000', 'font-size': '18px', 'font-weight': 'bold' }); /** * @Date: 2021-08-17 * @author @拿菜刀砍电线 * @Description:为了解决elementui的复杂表头，固定前三列的问题 * 问题分析1、发现给了固定宽度，和fixed属性后，没有固定的部分被加上了is-hidden的类名，导致页面数据被隐藏了，所以要想办法去掉这个类名 * 2、经过查看html结构后，使用jquery去掉is-hidden类名 */ let kingBody = $('.kingChangeHead .el-table__body-wrapper .el-table__body tr'); kingBody.each(function(index, domEle) { $(domEle) .find('td') .each(function(index1, domEle1) { $(domEle1).removeClass('is-hidden'); }); }); if (this.$refs.mutipleTable !== undefined) { this.$refs.mutipleTable.doLayout(); } });

2.2 全部代码：

.changeElBoCoSt { .el-table .cell { color: #333; } .el-table__header { // border-right: 1px solid #000; border-top: 1px solid #000; border-left: 1px solid #000; } .el-table__body { // border-right: 1px solid #000; // border-bottom: 1px solid #000; border-left: 1px dashed #000; }.el-table--border td { border-right: 1px dashed #000; } .el-table--border th { border-right: 1px solid #000; } .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed { border-right: 1px dashed #000; }.el-table--border th { border-bottom: 1px solid #000; }.el-table__fixed-right-patch { border-bottom: 1px dashed #000; }.el-table td { border-bottom: 1px dashed #000; } .el-table th.is-leaf { border-bottom: 1px solid #000; }.el-table__header tr, .el-table__header th { background-color: #ffc000 !important; } // // body的每一行的最后一个单元格 // .el-table__body tr td:last-child { //border-right: 1px solid #000; // } // // body的最后一行 // .el-table__body tr:last-child td { //border-bottom: 1px solid #000; // } // //（刚好最后两行的第一列有合并才要这个） // .el-table__body tr:first-child td:first-child { //border-bottom: 1px solid #000; // }// 双下划线（表体） // .kingRowIndex td { //border-bottom: 2px solid #000000 !important; // } // 表头 // .kingRowIndex1 { //border-right: 2px solid #000000 !important; // } }