vue.js - vxe-table自定义高度不生效如何解决？

Question

比如表格无数据时，我想默认设置一个高度为200，表格有数据时，我想设置一个高度为40.这样写不生效如何解决？

min-height="tableData.length ? 40 : 200"

<vxe-table
  ref="tableRef"
  stripe
  :loading="loading"
  :min-height="tableData.length ? 40 : 200"
  :column-config="{resizable: true}"
  :scroll-y="{enabled: false}"
  :row-config="{isHover: true, keyField: 'id'}"
  :data="tableData"
  :checkbox-config="{checkRowKeys: defaultSelectRowKeys}"
  @checkbox-all="selectAllChangeEvent"
  @checkbox-change="selectChangeEvent"
/>

Answer 1

在 vxe-table 中设置动态高度需要注意几个关键点：

1. 使用 height 而不是 min-height 来实现动态高度
2. 需要添加单位（如 px）
3. 对于空数据的情况，推荐使用计算属性

修改后的实现方案：

<vxe-table
  ref="tableRef"
  stripe
  :loading="loading"
  :height="tableHeight" <!-- 改为使用计算属性 -->
  :column-config="{resizable: true}"
  :scroll-y="{enabled: false}"
  :row-config="{isHover: true, keyField: 'id'}"
  :data="tableData"
  :checkbox-config="{checkRowKeys: defaultSelectRowKeys}"
  @checkbox-all="selectAllChangeEvent"
  @checkbox-change="selectChangeEvent"
/>

// 在 script 中
computed: {
  tableHeight() {
    return this.tableData.length ? 400 : 200 // 注意这里要加单位或保持数值
  }
}

如果仍然不生效，可以尝试以下方法：

1. 强制刷新表格：

   this.$nextTick(() => {
     this.$refs.tableRef.refresh()
   })

2. 使用 CSS 辅助控制：

   .vxe-table--body-wrapper {
     min-height: 200px !important;
   }

3. 检查父容器是否具有固定高度，表格高度需要基于父容器的高度进行计算

注意：40px 的高度可能过小无法正常显示表格内容，建议：

• 使用 min-height 和 height 结合
• 根据行高自动计算高度：行高 * 数据条数 + 表头高度
• 设置合理的最大/最小高度范围