ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.12k stars 14.64k forks source link

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

Open hoticer opened 5 years ago

hoticer commented 5 years ago

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 commented 5 years ago

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

liub1934 commented 5 years ago

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

liub1934 commented 5 years ago

image

zwdgit commented 5 years ago

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

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

liub1934 commented 5 years ago

同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 commented 5 years ago

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

lichanging commented 5 years ago

v - 2.8.2 has this problem, too

goldengecko commented 5 years ago

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 commented 4 years ago

同2.12.0版本出现该问题,mark

EmilyMew commented 4 years ago

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

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.