本文介绍如何在 cellTemplate 给外部容器加上类名。

问题

DevExpress Extreme中，表格使用 editCellTemplate 作为编辑模板，使用 cellTemplate 作为详情模板。在建模引擎 v2.0中，多重枚举就是使用详情模板来显示。如下是显示属性字段在Adaptive Detail Row（自适应明细面板）中的显示，明显看出它的行更高，且左边无内边距，显得不整齐，需要修正。

分析

查看源码后发现是详情模板的外层缺少dx-adaptive-item-text引起的，不知道DevExpress为什么在外层不做统一处理，它的定义如下。

.dx-datagrid-rowsview .dx-adaptive-detail-row .dx-adaptive-item-text {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
}

解决

查看详情模板的代码，提供了外层container参数，直接在里面添加类名。

cellTemplate: function (container, options) {
    const noBreakSpace = '\u00A0';
    const assignees = (this.splitNumberByBits(options.value) || []).map(
        (assigneeId) => options.column.lookup.calculateCellValue(assigneeId)
    );
    const text = assignees.join(', ');

    // ✅ 关键：给容器添加类名
    container.classList.add('dx-adaptive-item-text');

    container.textContent = text || noBreakSpace;
    container.title = text;
}

最终形成一致的结果。