SharePoint Online列表JSON列格式嵌套子元素不显示问题求助

我正在Microsoft List中创建Status列，用于展示多阶段审批流程的进度。需先创建以下列：

• Status（类型：单行文本）
• Stage1Person（类型：人员）
• Stage2Person（类型：人员）
• Stage3Person（类型：人员）

将JSON列格式应用到Status列后，条件逻辑和颜色设置均正常，但每个阶段末尾作为箭头的嵌套<span>元素完全未被渲染，无法实现预期的带箭头进度条效果。

问题核心原因 #

查阅官方文档确认：当元素设置了txtContent属性时，其children子元素会被系统忽略，这就是箭头元素不显示的关键原因。

解决思路与修正后的JSON #

要同时显示阶段文本和箭头，需调整DOM结构：将原本父元素的txtContent内容转移到子元素中，让父元素仅负责样式控制和包含所有子元素（文本+箭头）。

修正后的完整JSON代码 #

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "font-size": "16px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage1Person] == '', '#eee', '#aeffae')"
            },
            "children": [
                {
                    "elmType": "span",
                    "txtContent": "Stage 01",
                    "style": {
                        "z-index": "1"
                    }
                },
                {
                    "elmType": "span",
                    "style": {
                        "position": "absolute",
                        "top": "0",
                        "right": "-19px",
                        "width": "0",
                        "height": "0",
                        "border-top": "21px solid transparent",
                        "border-bottom": "20px solid transparent",
                        "z-index": "2",
                        "border-left": "19px solid =if([$Stage1Person] == '', '#eee', '#aeffae')"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
            },
            "children": [
                {
                    "elmType": "span",
                    "txtContent": "Stage 02",
                    "style": {
                        "z-index": "1"
                    }
                },
                {
                    "elmType": "span",
                    "style": {
                        "position": "absolute",
                        "top": "0",
                        "right": "-19px",
                        "width": "0",
                        "height": "0",
                        "border-top": "21px solid transparent",
                        "border-bottom": "20px solid transparent",
                        "z-index": "2",
                        "border-left": "19px solid =if([$Stage2Person] == '', '#ffdcae', '#aeffae')"
                    }
                }
            ]
        },
        {
            "elmType": "div",
            "style": {
                "float": "left",
                "padding": "10px 30px 10px 40px",
                "position": "relative",
                "font-family": "Arial",
                "background-color": "=if([$Stage3Person] == '', '#ffaeae', '#aeffae')"
            },
            "children": [
                {
                    "elmType": "span",
                    "txtContent": "Stage 03",
                    "style": {
                        "z-index": "1"
                    }
                }
            ]
        }
    ]
}

代码调整说明 #

1. 移除每个阶段父div的txtContent属性，新增一个子span元素负责显示阶段文本
2. 箭头元素保留在父div的子元素列表中，通过border-left设置箭头颜色（替代原background-color，更符合箭头的边框实现逻辑）
3. 给文本span设置z-index:1，确保文本显示在箭头元素上方，避免被遮挡

效果验证 #

调整后的JSON会正常渲染每个阶段的文本和箭头，背景色的条件逻辑保持不变，完全满足审批进度的展示需求。

内容的提问来源于stack exchange，提问作者user1063287