问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
小数点
    91110
    头像
    along
      3.1k1531

      比如表格无数据时，我想默认设置一个高度为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"
/>
      vue.js
      阅读 967
      avatarAI BotBETA

      在 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 结合
      • 根据行高自动计算高度：行高 * 数据条数 + 表头高度
      • 设置合理的最大/最小高度范围
      1 个回答
      得票最新
      头像
      Frank
        44139

        min-height不是响应式的；可以动态设置height，或者用数据为空的插槽试试

        <template #empty>
  <span style="color: red;height: 200px">
    <img src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif">
    <p>没有更多数据了！</p>
  </span>
</template>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题