Thymeleaf使用switch case判断枚举状态时同时命中所有分支如何解决

你代码的问题出在两个地方：

• 枚举类型匹配逻辑错误
  ${image.status} 是 GalleryImage_DetectionStatus 枚举类的实例，而你 th:case 里写的是带单引号的字符串值，二者属于不同类型，equals 比较会直接返回 false，导致所有自定义分支都匹配失败。
• 默认通配符分支写法错误
  Thymeleaf 的 th:switch 语法中，默认分支的通配符写法是 th:case="*"，你额外加了单引号写成 th:case="'*'"，就变成了匹配字符串"*"，无法作为兜底分支生效。所有分支都匹配失败时，没有触发Thymeleaf的元素移除逻辑，最终所有case对应的内容都被渲染出来了。

任选一种即可：

方案1：将枚举转为字符串匹配 #

修改th:switch表达式，调用枚举的name()方法转为字符串，同时修正默认分支的写法：

<!-- 改为取枚举的名称字符串做匹配 -->
<td th:switch="${image.status.name()}">
    <p th:case="'neverReviewed'">
        <div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.neverReviewed}">
            <img th:src="@{/img/Check_blue_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
        </div>
    </p>
    <p th:case="'partiallyReviewed'">
        <div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.partiallyReviewed}">
            <img th:src="@{/img/Check_orange_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
        </div>
    </p>
    <p th:case="'fullyReviewed'">
        <div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.fullyReviewed}">
            <img th:src="@{/img/Check_green_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
        </div>
    </p>
    <!-- 去掉通配符的单引号 -->
    <p th:case="*">
        <div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.neverReviewed}">
            <img th:src="@{/img/Check_blue_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
        </div>
    </p>
</td>

方案2：直接匹配枚举常量 #

不用修改th:switch的写法，将每个th:case的取值改为枚举常量引用，注意替换为你自己的枚举类全限定名：

<td th:switch="${image.status}">
    <p th:case="${T(com.yourpackage.GalleryImage_DetectionStatus).neverReviewed}">
        <div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.neverReviewed}">
            <img th:src="@{/img/Check_blue_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
        </div>
    </p>
    <p th:case="${T(com.yourpackage.GalleryImage_DetectionStatus).partiallyReviewed}">
        <div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.partiallyReviewed}">
            <img th:src="@{/img/Check_orange_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
        </div>
    </p>
    <p th:case="${T(com.yourpackage.GalleryImage_DetectionStatus).fullyReviewed}">
        <div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.fullyReviewed}">
            <img th:src="@{/img/Check_green_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
        </div>
    </p>
    <p th:case="*">
        <div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.neverReviewed}">
            <img th:src="@{/img/Check_blue_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
        </div>
    </p>
</td>

HTML规范中<p>标签不能嵌套<div>这类块级元素，建议你把所有包裹div.img-container的<p>标签替换为<div>，避免浏览器解析时自动闭合标签导致结构异常。

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