本文介绍在 wijmo flexgrid 中通过 javascript 动态设置行高或单元格高度的可靠方案，尤其适用于 id 动态生成、无法预知 css 选择器的场景，涵盖 vue 绑定、css 类注入与 dom 操作的最佳实践。
本文介绍在 wijmo flexgrid 中通过 javascript 动态设置行高或单元格高度的可靠方案，尤其适用于 id 动态生成、无法预知 css 选择器的场景，涵盖 vue 绑定、css 类注入与 dom 操作的最佳实践。
Wijmo FlexGrid 的行高控制不能仅依赖传统 CSS（如 .wj-cell { padding: 32px }），尤其当容器 ID 动态生成（如 form-2__firstName）时，硬编码 CSS 选择器不可行，而直接操作 DOM（如 $('.wj-cell').css(...)）又易被 Wijmo 内部重渲染覆盖——这是因 FlexGrid 采用虚拟滚动与模板化单元格渲染机制，手动修改样式可能在滚动、排序或刷新后失效。
✅ 推荐方案：使用 loadedRows 事件 + row.cssClass 动态绑定（Vue 场景）
该方法完全符合 Wijmo 官方生命周期设计，在每行加载完成时注入自定义 CSS 类，安全、稳定且可复用：
<wj-flex-grid :items-source="data" :loaded-rows="onLoadedRows" :auto-generate-columns="false"> <wj-flex-grid-column binding="name" header="姓名" /> <wj-flex-grid-column binding="remark" header="备注" /> </wj-flex-grid>
export default {
methods: {
onLoadedRows(grid) {
grid.rows.forEach(row => {
// 方式1：基于数据项字段设置行高（推荐）
const height = row.dataItem?.rowHeight || 48; // 单位：px
row.height = height;
// 方式2：附加 CSS 类实现更灵活样式（如不同行不同内边距/字体）
row.cssClass = `custom-row-height-${height}`;
});
}
}
}⚠️ 注意事项：
- row.height 是 Wijmo 原生属性，直接赋值像素值（如 48）即可生效，无需单位字符串；它会覆盖默认行高并参与布局计算；
- 若需响应式高度（如根据内容自动撑开），应结合 row.minHeight 和 grid.autoRowHeights = true，但需确保列中内容不溢出（建议配合 white-space: normal; word-break: break-word）；
- 避免在 loadedRows 外部调用 grid.refresh() 或手动修改 DOM 样式，否则可能导致样式丢失或性能下降。
? 补充方案：全局 CSS + 属性选择器（纯 JS / 非 Vue 场景）
若无法使用 Vue 生命周期，可通过动态插入 <style> 标签，利用属性选择器匹配动态 ID：
function setGridRowHeight(dynamicId, heightPx = 48) {
const styleId = `wijmo-row-height-${dynamicId.replace(/[^a-z0-9]/gi, '-')}`;
if (document.getElementById(styleId)) return;
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
[id="${dynamicId}"] .wj-cell,
[id="${dynamicId}"] .wj-row:not(.wj-header) > .wj-cell {
padding-top: ${heightPx / 2}px !important;
padding-bottom: ${heightPx / 2}px !important;
box-sizing: border-box;
}
`;
document.head.appendChild(style);
}
// 调用示例（ID 动态生成后立即应用）
setGridRowHeight(`form-${currentFormIndex}__${element.Name}`, 64);? 总结：
- ✅ 首选 row.height + loadedRows：语义清晰、官方支持、兼容虚拟滚动；
- ✅ 次选动态 CSS 注入：适用于非框架环境，避免 ID 硬编码；
- ❌ 避免 find().css() 直接操作：易被重绘覆盖，且破坏 Wijmo 渲染一致性；
- ? 行高单位统一为像素数值（row.height = 48），非字符串 '48px'。
通过以上方式，你可在任何动态 ID 场景下精准、稳定地控制 Wijmo Grid 行高，兼顾可维护性与运行时性能。
