Element: [Bug Report] 表格同时加上:show-header="false"和height就会报错

[hoticer]

Element UI version

2.12.0

OS/Browsers version

win10,chrome76.0.3809.100

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/nyu6fcdp/

Steps to reproduce

table加上
:height="200"
:show-header="false"

就会导致
// fix issue (https://github.com/ElemeFE/element/pull/16956)
var headerTrElm = headerWrapper.querySelector('.el-table__header tr')
这行报错, headerWrapper是undefined

What is Expected?

不报错

What is actually happening?

报错, 2.12.0版本才出现的问题

[leozhang123]

I have the same problem , but I try use 2.11.1 is good

[liub1934]

同2.12.0版本出现该问题 暂时通过隐藏css控制表头显示

[liub1934]

[zwdgit]

同2.12.0版本出现该问题 暂时通过隐藏css控制表头显示

老哥，能具体说一下你是如何隐藏的吗？我目前加了一个css：max-height 5px 暂时解决了这个问题，不知道有没有方法可以直接隐藏整个div

[liub1934]

同2.12.0版本出现该问题 暂时通过隐藏css控制表头显示

老哥，能具体说一下你是如何隐藏的吗？我目前加了一个css：max-height 5px 暂时解决了这个问题，不知道有没有方法可以直接隐藏整个div

需要隐藏表头的表格加个hide-table-header的class，然后用display: none隐藏

.hide-table-header .el-table__header-wrapper{
  display: none;
}

[Hannicke]

刚升级了element版本，确实有这个问题，而且row-click的参数 column, event变了位置。。

[lichanging]

v - 2.8.2 has this problem, too

[goldengecko]

The problem is caused by the code in table.vue where it has:

    <div
      v-if="showHeader"
      v-mousewheel="handleHeaderFooterMousewheel"
      class="el-table__header-wrapper"
      ref="headerWrapper">

Which means that the headerWrapper is only going to exist if showHeader is true. Then in table-layout.jsit uses:

    const { headerWrapper, appendWrapper, footerWrapper } = this.table.$refs;

to try to grab the headerWrapper which will of course be undefined. When it gets to:

    const headerTrElm = headerWrapper.querySelector('.el-table__header tr');

It's trying to call querySelector on undefined, and everything blows up.

To fix this, the logic should be changed so that if !this.showHeader then headerHeight should be set to 0 and it shouldn't go looking for the header elements.

[neozo]

同2.12.0版本出现该问题,mark

[EmilyMew]

一样，2.12.0版本发现此问题。