SharePoint列表列能否根据复选框状态切换对应进度条图标？

完全可以通过SharePoint原生列格式化功能实现需求，不需要部署自定义代码，直接配置JSON即可生效，以下是可直接复用的方案。
方案默认按你给出的4个字段顺序作为进度流转顺序：图纸与BOM比对→新零件排程→NPL物料备齐→编程完成，内置顺序校验逻辑：前序阶段未勾选时，即使后序阶段误勾选也不会错误显示超前进度，避免状态标记混乱。

配置步骤 #

• 在现有SharePoint列表中新建一个「单行文本」类型的列，命名为「零件引入进度」即可，不需要设置默认值，也不需要手动填内容
• 进入该列的设置页，找到「列格式化」板块，切换到「高级模式」
• 将下方提供的JSON代码全量粘贴到代码输入框中，保存设置后返回列表视图即可看到自动生成的进度条

可直接复用的JSON代码 #

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "width": "100%",
    "min-height": "32px",
    "padding": "4px 0",
    "display": "flex",
    "flex-direction": "column",
    "row-gap": "4px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "font-size": "12px",
        "display": "flex",
        "justify-content": "space-between",
        "color": "#374151"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "新零件引入进度"
        },
        {
          "elmType": "span",
          "txtContent": "=if([$CompareDrawingstoBOM]!='true','0/4',if([$NewPartisScheduled]!='true','1/4',if([$MaterialSecuredinNPL]!='true','2/4',if([$ProgrammingComplete]!='true','3/4','4/4')))) + ' 阶段完成'"
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "width": "100%",
        "height": "12px",
        "display": "flex",
        "column-gap": "2px",
        "border-radius": "6px",
        "overflow": "hidden",
        "background-color": "#e5e7eb"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "flex-grow": "1",
            "height": "100%",
            "background-color": "=if([$CompareDrawingstoBOM]=='true','#10b981','#e5e7eb')",
            "border-radius": "6px 0 0 6px"
          },
          "attributes": {
            "title": "1. 图纸与BOM比对"
          }
        },
        {
          "elmType": "div",
          "style": {
            "flex-grow": "1",
            "height": "100%",
            "background-color": "=if([$CompareDrawingstoBOM]=='true' && [$NewPartisScheduled]=='true','#10b981','#e5e7eb')"
          },
          "attributes": {
            "title": "2. 新零件排程"
          }
        },
        {
          "elmType": "div",
          "style": {
            "flex-grow": "1",
            "height": "100%",
            "background-color": "=if([$CompareDrawingstoBOM]=='true' && [$NewPartisScheduled]=='true' && [$MaterialSecuredinNPL]=='true','#10b981','#e5e7eb')"
          },
          "attributes": {
            "title": "3. NPL物料备齐"
          }
        },
        {
          "elmType": "div",
          "style": {
            "flex-grow": "1",
            "height": "100%",
            "background-color": "=if([$CompareDrawingstoBOM]=='true' && [$NewPartisScheduled]=='true' && [$MaterialSecuredinNPL]=='true' && [$ProgrammingComplete]=='true','#059669','#e5e7eb')",
            "border-radius": "0 6px 6px 0"
          },
          "attributes": {
            "title": "4. 编程完成"
          }
        }
      ]
    }
  ]
}

自定义调整说明 #

• 若不需要顺序校验，只按复选框勾选总数量显示进度，把每个进度块的background-color判断条件简化为仅匹配对应字段的布尔值即可，例如第二个进度块的判断条件可改为=if([$NewPartisScheduled]=='true','#10b981','#e5e7eb')
• 进度条颜色可自行替换色值修改：#10b981、#059669为完成态绿色，#e5e7eb为未完成态灰色
• 代码里已经给每个进度块加了悬浮提示，鼠标停在对应块上会显示阶段名称，可修改title属性的文字调整提示内容
• 进度条高度、文字大小可修改对应style里的height、font-size数值调整，单位为px

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