本文介绍在 Wijmo FlexGrid 中通过 JavaScript 动态设置行高或单元格高度的两种可靠方案：一是利用 loadedRows 事件为每行绑定自定义 CSS 类或直接设置 height 属性；二是使用属性选择器或全局样式覆盖实现 CSS 层面的动态适配，彻底规避硬编码 ID 问题。
本文介绍在 wijmo flexgrid 中通过 javascript 动态设置行高或单元格高度的两种可靠方案：一是利用 `loadedrows` 事件为每行绑定自定义 css 类或直接设置 `height` 属性；二是使用属性选择器或全局样式覆盖实现 css 层面的动态适配，彻底规避硬编码 id 问题。
Wijmo FlexGrid 默认采用紧凑布局，若需统一或按需调整行高（尤其在动态生成容器 ID 的场景下），不推荐依赖 jQuery 直接操作 DOM 样式（如 $('.wj-cell').css(...)），原因有三：
- Wijmo 内部会重置/覆盖手动注入的内联样式；
- 动态 ID 导致 CSS 选择器难以维护；
- 单元格渲染受虚拟滚动与模板机制影响，DOM 节点可能被复用或延迟挂载。
✅ 推荐方案一：使用 loadedRows 事件（Vue 环境）
该事件在行数据加载完成后触发，可安全访问并修改每一行的样式属性：
<template>
<wj-flex-grid
:items-source="data"
:loaded-rows="onLoadedRows"
:headers-visible="true"
/>
</template>
<script>
export default {
methods: {
onLoadedRows(grid) {
grid.rows.forEach(row => {
// 方案 A：统一设置固定行高（单位：px）
row.height = 48;
// 方案 B：根据数据动态设置（如字段含 height 配置）
// const dt = row.dataItem;
// row.height = dt?.customRowHeight || 48;
// 方案 C：添加自定义 CSS 类（更灵活，便于主题控制）
// row.cssClass = 'custom-row-height';
});
}
}
};
</script>⚠️ 注意：row.height 是 Wijmo 内置属性，优先级高于 CSS padding 或 line-height，且不受虚拟滚动干扰，是官方推荐的行高控制方式。
✅ 推荐方案二：CSS 全局样式 + 属性选择器（通用 JS/React/Vue）
若需纯 CSS 方案（例如兼容非 Vue 环境或统一主题），可利用 Wijmo 组件的稳定类名，结合 [id^="form-"] 等属性选择器匹配动态 ID：
/* 匹配所有以 "form-" 开头的容器下的 Wijmo 单元格 */
[id^="form-"] .wj-cell,
[id^="form-"] .wj-row:not(.wj-header) .wj-cell {
padding: 12px 8px !important; /* 垂直内边距决定视觉行高 */
line-height: 1.5;
}
/* 更精准：仅作用于数据行（排除表头和分组行） */
[id^="form-"] .wj-cells .wj-row.wj-data .wj-cell {
padding-top: 16px !important;
padding-bottom: 16px !important;
}? 小技巧：Wijmo 的 .wj-cell 默认 box-sizing: border-box，因此 padding 可直接扩展单元格内容区域高度；配合 !important 可确保覆盖组件默认样式（但应谨慎使用，建议封装为独立样式表）。
✅ 补充说明：避免常见误区
- ❌ 不要尝试 grid.hostElement.querySelector(...).style.height —— Wijmo 会重绘并覆盖；
- ❌ 避免在 initialized 钩子中批量设 cellTemplate 控制高度（性能开销大，且不解决行高本质）；
- ✅ 若需响应式行高（如根据内容自动撑开），可结合 autoSizeRows() 方法 + row.rendered 事件监听内容变化。
综上，loadedRows 事件 + row.height 是最稳定、语义清晰、性能友好的动态行高方案；而 CSS 属性选择器则作为轻量级兜底策略，二者可组合使用，兼顾灵活性与可维护性。
