Element plus table组件中table-layout=“auto”与固定表头冲突的问题

JLdiesel
1,864 阅读2分钟

最近在工作中有这么一个需求，要求每一行的宽度随内容撑开，在Element文档中发现又table-layout这个属性，将其设置为auto，就能实现每一行的宽度随内容撑开。

image.png 但是之后又提了需求，说要固定表头，我内心窃喜，那不是设置一个height就完事了？立马保证，给我半分钟我就给你改完。

image.png 一看代码
那么大一个heigth='250',怎么表头没固定呢？？？
于是开始尝试修改代码，尝试了多次选项变更后，定位到了原因，当设置table-latyout为auto时，固定表头就失效了。

Why???

这是bug嘛？为什么不会固定表头呢？
于是开始调试，打开控制台，发现同时都设定了height，但是当table-latyout设定为fixed的时候，table渲染的dom节点结构是这样子的

image.png 当设定为auto时，dom结构是这样子的

image.png 因为Element plus源码中使用的都是h函数来创建vnode，于是我便想，是不是源码中做了什么判断，当设定为auto的时候，就会选择另一种方式渲染dom。
打开Element plus 2.1.9版本的源码，找到lib/components/table/src/table.js。
一行一行看肯定不现实，于是我就想靠搜索，发现两边的差距是多了一个class为el-table__header-wrapper的元素，我便在vscode中搜索el-table__header-wrapper。

image.png 没搜到???怎么可能，难道不在这里？
稍微看了一丢丢源码，发现class中的el-table__前缀，都是通过一个函数加上去的

image.png
比如这个最后就会转变为el-table__header-wrapper，OK，那就去搜索header-wrapper

image.png 终于，不负众望找到了这个header-wrapper，并且就在其上方发现了这一行判断，

_ctx.showHeader && _ctx.tableLayout === "fixed"? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
        key: 0,
        ref: "headerWrapper",
        class: vue.normalizeClass(_ctx.ns.e("header-wrapper"))
      }

image.png 当showHeader为true并且tableLayout为fixed的时候，才会渲染这个header-warpper。

至此终于真相大白，我的内心中仍有疑惑，这一行肯定不是随便加的，但是为什么要这么判断呢？tableLayout与头部固定会有冲突嘛？我的css并不理想，还请各位掘金大佬们指点迷津。

第一次发文章，有什么排版问题还请见谅。

avatar
文章
阅读
粉丝