vxe-table 列宽控制：width、min-width 与 max-width 的共同利用
在开辟数据表格时，公道的列宽设置可以大概显着提拔用户体验。vxe-table 提供了 width、min-width 和 max-width 三种列宽属性，方便风雅控制每一列的宽度设置。参数
属性类作用widthNumber固定列宽。设置后该列将严格按照此宽度体现，不会被压缩或拉伸（除非内容溢出）。min-widthNumber最小列宽。当表格总宽度大于全部列宽之和时，多余空间会按 min-width 比例分配到各列；同时，当窗口缩小时，列宽不会小于 min-width。max-widthNumber最大列宽。当列宽由于内容或分配而凌驾此值时，将被限定在 max-width 内。min-width 和 max-width 经常组合利用，用于实现“弹性列但不凌驾某个上限”的结果。
代码
https://img2024.cnblogs.com/blog/3563285/202606/3563285-20260601142713736-915579358.png
<template>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</template>注意
许多人为了雅观，会给每一列都设置一个 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
免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.
页:
[1]