在数据量巨大的表格中，假造滚动是包管性能的关键技能。但启用假造滚动后，表格默认全部行高划一（由 rowConfig.height 或默认值决定）。然而在现实业务中，常常必要某些行展示更多内容（如多行文本、图片、自界说组件），导致行高必要独立调解。vxe-table 提供了 setRowHeight， setRowHeightConf 与 getRowHeight 方法，答应你在假造滚动模式下动态设置每一行的具体高度，同时未设置的行仍可保持默认高度，实现真正的“自顺应行高 + 自界说行高”的混淆模式。
核心设置
核心 show-overflow=false,要利用动态行高功能，需满足以下底子设置：
设置项要求分析rowConfig.keyField必须指定行数据的唯一标识字段（如 id），用于准确匹配行。virtualYConfig.enabledtrue启用纵向假造滚动。virtualYConfig.gt发起 0高出该阈值启用假造滚动，设为 0 表现始终启用。留意：假造滚动模式下，行高必要预先盘算以准确渲染滚动条。利用 setRowHeight 后，表格内部会重新盘算假造滚动布局，因此不会粉碎假造滚动的性能上风。
行高的 API
方法署名分析setRowHeight(rowId: stringnumber, height: number) => voidsetRowHeightConf(heightConf: Record) => void批量设置指定主键行的行高（单元 px）。getRowHeight(rowId: stringnumber) => number代码
示例模仿天生了大量数据（包罗多行文本内容、图片列），通过按钮动态将指定行的行高调解为 300px、400px、500px 等，演示了假造滚动下独立行高的结果。
- <template>
-
- <vxe-button status="primary" @click="handleRowHeight(10000, 500)">设置10004=500px</vxe-button>
- <vxe-button status="primary" @click="handleRowHeight(10004, 400)">设置10004=400px</vxe-button>
- <vxe-button status="primary" @click="handleRowHeight(10095, 300)">设置10095=300px</vxe-button>
- <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
-
- </template>
- 默认行高：假造滚动模式下，表格会利用一个全局默认行高（可通过 rowConfig.height 设置，默认约 40px）。未调用 setRowHeight 的行均接纳此高度。
- 手动自界说：通过 setRowHeight(id, height) 为特定行指定高度后，该行将利用你设定的值，且假造滚动会准确调解滚动条和渲染地区。
- “自顺应”的寄义：表格本身不会自动根据内容盘算行高。但你可以联合业务逻辑实现自顺应结果，比方：
- 在数据加载后，遍历每一行，根据其内容长度、图片数量等动态盘算所需高度，然后批量调用 setRowHeight。
- 利用 cellRender 自界说渲染器，在渲染完成后通过 DOM 获取现实高度，再调用 setRowHeight 调解（留意性能）。
小提示：假如渴望表格完全自动撑开全部行的高度（类似非假造滚动模式），则必要关闭假造滚动。假造滚动的核心代价在于固定行高下的极致性能，动态行高会带来肯定额外盘算开销，因此请按需利用。
留意事项与性能发起
留意点分析必须设置 keyField没有唯一主键，setRowHeight 无法定位具体行。调用机遇必须在表格数据渲染完成（nextTick）后调用，否则行大概尚未天生 DOM。频仍调用制止在滚动或高频变乱中频仍调用 setRowHeight，会导致假造滚动重新盘算布局，影响性能。发起批量设置。行高过大假如某行高度高出可视地区，依然可以正常滚动，但会增长滚动时的渲染开销。与 showOverflow 的关系若 showOverflow: true，内容会被截断并表现省略号，不会撑高行；如需内容自动换行撑高行，请设置 showOverflow: false，并在列上利用 min-width 或 word-break 样式。获取行高利用 getRowHeight(id) 可读取当前行高，包罗默认值和已设置的值。动态列宽假如列宽变革导致内容换行数量变革，行高大概需重新盘算，此时应重新调用 setRowHeight。与分组/树形布局对于树形表格或分组表，setRowHeight 同样有用，但需留意主键的唯一性。
- vxe-table 在假造滚动模式下，通过 rowConfig.keyField + setRowHeight 方法，美满支持混淆行高场景：
- 大部门利用用同一的默认行高，包管假造滚动的流通性。
- 少数特殊行（如展示图片、多行文本、详情信息）可独立设置更高或更低的高度。
- 共同业务逻辑，可以实现基于内容的“自顺应”行高。
这种方法既生存了假造滚动处置惩罚大数据量的本领，又提供了机动的行高定制本领，非常得当企业级复杂表格需求。
https://vxetable.cn
免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金. |
发表于 