vue表格vxe-table实现单元格自适应行高与最大高度限制

在数据密集型的后台系统中，表格是信息展示的核心载体。当单元格内容过长时，常见的处理方式有截断（省略号）、固定高度滚动或自适应行高。
截断会丢失信息，固定高度滚动则影响阅读流畅性，而自适应行高能让所有内容完整可见，但极端情况下（如某行包含数百字）会撑爆表格，破坏整体布局。
本文将基于 vxe-table（Vue 生态最强表格组件）演示如何开启单元格自适应行高，并设置最大高度限制，在“完整展示”与“布局可控”之间取得平衡。

核心配置解析

vxe-table 通过两个关键属性控制行高行为：

属性	作用	取值
showOverflow	是否启用溢出隐藏（固定行高）	true（默认）：固定行高，超出显示省略号 false：关闭固定行高，单元格高度随内容自动撑开
cellConfig.maxHeight	单元格最大高度（px）	数值，仅当 showOverflow=false 时生效

实现步骤

默认值showOverflow 就是false，也可以手动设置，单元格高度即根据内容自动扩展，内容中的换行符（\n）也会被识别并换行。

const gridOptions = reactive({
  showOverflow: false,
  columns: [ /* ... */ ],
  data: [ /* ... */ ]
})

• 效果：
  • 短内容单元格保持默认高度
  • 长文本单元格自动增高，完整显示所有文字
  • 列头文字过长时也会自动换行（若列宽固定，列头会自动折行）

自定义高度

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  showOverflow: false,
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: '列头自动换行列头自动换行行列头自动换行', width: 120 },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: '内容自动换行内容自动换行内容自动换容自动换行内容自动换行内容自动换行内容自动换行内容自动换行内容自动换行内容自动换行内容自动换行内容自动换行容自动换行内容自动换行', role: 'Designer', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Test', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

同时显示最大高度

若某个单元格内容极长（如产品描述、日志信息），自适应行高可能导致该行高度过大，影响页面整体美观和滚动体验。
通过 cellConfig.maxHeight 设定上限（如 100px）。

• 效果：
  • 内容高度 ≤ 100px 时，完全展示
  • 内容高度 > 100px 时，单元格出现纵向滚动条，用户可滚动查看全部内容

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  showOverflow: false,
  cellConfig: {
    maxHeight: 100
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: '列头自动换行列头自动换行行列头自动换行', width: 120 },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: '内容自动换行内容自动换行内容自动换容自动换行内容自动换行内容自动换行内容自动换行内容自动换行内容自动换行内容自动换行内容自动换行内容自动换行容自动换行内容自动换行', role: 'Designer', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Test', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

行为对比一览

配置	短内容	长内容（正常长度）	超长内容（极端）
showOverflow: true（默认）	固定行高	溢出隐藏，显示省略号	溢出隐藏，显示省略号
showOverflow: false	固定行高（无变化）	行高自适应，完整显示	行高自适应，可能会很高
showOverflow: false + cellConfig.maxHeight	固定行高	行高自适应，完整显示	高度限制，出现滚动条

vxe-table 通过 showOverflow 和 cellConfig.maxHeight 这对组合，赋予了开发者对单元格行高精细控制的能力——既能享受自适应带来的内容完整性，又能通过最大高度限制避免极端情况下的布局紊乱。
实际开发中，可根据业务场景灵活选择配置，为终端用户提供更舒适的表格浏览体验。

https://vxetable.cn