如何在Swagger UI中默认取消勾选Send empty value选项

方法一：自定义Swagger UI插件 #

Swagger UI支持通过自定义插件修改默认交互行为，你可以编写一个轻量插件，在请求体编辑器加载时自动取消该选项的勾选状态：

const CustomEmptyValuePlugin = () => {
  return {
    wrapComponents: {
      RequestBodyEditor: (Original) => (props) => {
        useEffect(() => {
          // 定位到"Send empty value"的复选框元素
          const emptyValueCheckbox = document.querySelector('.request-body-editor__send-empty-value input[type="checkbox"]');
          if (emptyValueCheckbox && emptyValueCheckbox.checked) {
            emptyValueCheckbox.checked = false;
            // 触发change事件保证UI状态同步
            emptyValueCheckbox.dispatchEvent(new Event('change'));
          }
        }, [props.schema]);

        return <Original {...props} />;
      }
    }
  };
};

// 初始化Swagger UI时注册插件
SwaggerUIBundle({
  url: "你的API规范文件地址.json",
  dom_id: '#swagger-ui',
  plugins: [CustomEmptyValuePlugin],
  // 其他原有配置项...
});

方法二：修改Swagger UI源码（仅自部署场景） #

如果你是自行部署的Swagger UI，可以直接修改源码中对应组件的默认值：

• 找到RequestBodyEditor组件的代码（通常在src/components/RequestBodyEditor.jsx这类路径下）
• 将复选框的checked默认属性从true改为false

注意：这种方式会在Swagger UI版本升级时丢失修改，仅适合临时需求。

方法三：优化OpenAPI规范（间接调整） #

如果你的requestBody字段都明确设置了required: true或者合理的nullable属性，部分版本的Swagger UI会自动调整“Send empty value”的默认状态，但这个效果不保证覆盖所有场景，仅作为辅助手段。

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