使用element-plus的 el-table 自动会显示高度是怎么设置去掉？

Question

使用element-plus的 el-table 自动会显示一个高度，但是这个我没有设置不知道是怎么出来的，怎么去掉这个高度呢？又遇到的小伙伴吗

Answer 1

直接扒拉源码：

定义地方：

// https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table/style-helper.ts#L276-L283

const tableInnerStyle = computed(() => {
    if (props.height) {
      return {
        height: !Number.isNaN(Number(props.height))
          ? `${props.height}px`
          : props.height,
      }
    }
    // ...
  })

使用地方：

/* https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table.vue#L29 */

<div :class="ns.e('inner-wrapper')" :style="tableInnerStyle"></div>

但，目前还没解答你的问题，为什么会自动设置呢？见下：

// https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table/style-helper.ts#L117-L136

onMounted {
// ...

resizeState.value = {
  width: (tableWidth.value = el.offsetWidth),
  height: el.offsetHeight,
  headerHeight:
    props.showHeader && tableHeader ? tableHeader.offsetHeight : null,
}

所以是在 onMounted 里定义了默认高度，及表格的offsetHeight。至于怎么去掉，目前组件没提供相关钩子来改写逻辑，可以考虑：自己动态设置 height 参数；或者样式覆盖。