vxe-table 列宽控制：width、min-width 与 max-width 的配合使用

最新推荐文章于 2026-06-19 22:04:32 发布

原创最新推荐文章于 2026-06-19 22:04:32 发布 · 199 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #vxe-ui #vxe-table #vue.js

vue 专栏收录该内容

9 篇文章

订阅专栏

在开发数据表格时，合理的列宽设置能够显著提升用户体验。vxe-table 提供了 width、min-width 和 max-width 三种列宽属性，方便精细控制每一列的宽度设置。

参数

属性	类	作用
width	Number	固定列宽。设置后该列将严格按照此宽度显示，不会被压缩或拉伸（除非内容溢出）。
min-width	Number	最小列宽。当表格总宽度大于所有列宽之和时，多余空间会按 min-width 比例分配到各列；同时，当窗口缩小时，列宽不会小于 min-width。
max-width	Number	最大列宽。当列宽因为内容或分配而超过此值时，将被限制在 max-width 内。

min-width 和 max-width 经常组合使用，用于实现“弹性列但不超过某个上限”的效果。

代码

在这里插入图片描述

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

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

const gridOptions = reactive({
  border: true,
  columns: [
    { type: 'seq', width: 80 },                     // 固定宽度 80px
    { field: 'name', title: 'Name', minWidth: 200 }, // 最小宽度 200px，可弹性拉伸
    { field: 'role', title: 'Role', minWidth: 140, maxWidth: 200 },   // 最小140px，最大不超过200px
    { field: 'sex', title: 'Sex', minWidth: 120, maxWidth: 200 },
    { field: 'date', title: 'Date', minWidth: 120, maxWidth: 200 }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }
  ]
})
</script>

注意

很多人为了美观，会给每一列都设置一个 max-width，认为这样能“控制表格总宽度”。然而，如果所有列的 max-width 之和小于表格容器的实际宽度，就会出现右侧空白区域。

列宽分配原理

vxe-table（基于 CSS table-layout: fixed）在计算列宽时遵循以下规则：

固定宽度优先：width 列的宽度严格遵守。
剩余空间分配：所有没有 width 的列，按各自的 min-width 比例（如果设置了）瓜分剩余宽度。如果某列同时有 min-width 和 max-width，则最终宽度会被限制在该区间内。
内容溢出：当内容超出列宽时，默认会换行或显示省略号（取决于 showOverflow 配置）。
空白区出现条件：所有列的最终宽度之和小于表格容器宽度时，多余宽度无法分配给任何一列（因为没有列允许继续拉伸），就会留下空白。

width、min-width 和 max-width 是 vxe-table 中非常灵活的列宽控制工具，合理组合可以打造出既美观又实用的表格。特别记住：避免所有列都设置 max-width，否则当表格变宽时会出现难以看出的空白区域，影响数据展示的紧凑性。按需使用，让表格布局更加智能。

https://vxetable.cn