以下是《thymeleaf3.0.5中文参考手册.pdf》中的代码,官方代码没有具体去查询。

<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
</div>

这样最终生成代码总会多出一个div。例如

<div>
<p>User is an administrator</p>
</div>

以下是笔者的代码。

user实体绑定实体ApiUserDto相关字段如下

@Data
public class ApiUserDto extends ApiUser {
private String certStatusLabel;
} @Data
public class ApiUser{
/***
* 审核状态 0 un certified //未认证(默认)
* 1 unaudited //待审核
* 2 certified //已认证
*/
private Integer certStatus;
}
<div th:switch="${user.certStatus}">
<div th:case="0" th:text="未认证" class="I124_name pageChange" data-page="/approve/index"></div>
<div th:case="1" th:text="待审核" class="I124_name pageChange" data-th-data-page="${user.type=='personal'?'/approve/personal':'/approve/company'}"></div>
<div th:case="2" th:text="已认证" class="I124_name pageChange" data-th-data-page="${user.type=='personal'?'/approve/personal':'/approve/company'}"></div>
</div>

生成效果

 显然在以下情况下,那个class并没有 最外层div,样式效果有可能就有变化了。走样?

解决方法1:

在sql语句层面额外生成一个属性certStatusLabel绑定到ApiUserDto,其他属性在页面上使用SpringEL表达式判断

select
case cert_status
WHEN 0 THEN '未认证'
WHEN 1 THEN '待审核'
WHEN 2 THEN '已认证'

END certStatusLabel,

count(n.id) notificationCount,
count(u.id) appCount,
IFNULL(u.avatar_url,'head_portrait2.png') avatar_url,
u.*
from api_user u left JOIN api_notification n
on n.user_id = u.id
LEFT JOIN api_app a on a.user_id = u.id
where u.login_name = #{loginName} and u.`password` = #{encryptedPassword}

笔者前端代码变成以下类似形式:

<div th:text="${user.certStatusLabel}" class="I124_name pageChange" data-th-data-page="${user.certStatus==0?'/approve/index':(user.certStatus==1)}"></div>

最终生成代码:

弊端:此种情况维护的时候需要修改sql语句重启web服务器

完美解决方法:

使用th:block

<th:block th:switch="${user.certStatus}">
<div th:case="0" th:text="未认证" class="I124_name pageChange" data-page="/approve/index"></div>
<div th:case="1" th:text="待审核" class="I124_name pageChange" data-th-data-page="${user.type=='personal'?'/approve/personal':'/approve/company'}"></div>
<div th:case="2" th:text="已认证" class="I124_name pageChange" data-th-data-page="${user.type=='personal'?'/approve/personal':'/approve/company'}"></div>
</th:block>

最终生成代码:

 弊端:生成代码上下文有空行,当然可以那几个case放到同一样,不过不方便维护,对于强迫症患者,来说比较致命。

如果你知道怎么把空行去除了,欢迎留言,笔者也是一个强迫症患者:)。

参考来源:

https://stackoverflow.com/questions/29657648/thymleaf-switch-statement-with-multiple-case

thymeleaf中switch case多出一个空行的更多相关文章

  1. Javascript 中 switch case 等于 (== )还是 恒等于(===)?

    Javascript 中 switch case 等于 (== )还是 恒等于(===)? 可以测试一下以下代码,这个 case 中是 等于(==)还是恒等于(===) <script> ...

  2. asp.net ashx处理程序中switch case的替代方案总结

    目录 1.用委托字典代替switch...case; 2.利用反射替代switch...case: 3.比较两种方案 4.其他方案 4.说明 5.参考 在开发 asp.net 项目中,通常使用一般处理 ...

  3. python中Switch/Case实现

    学习Python过程中,发现没有switch-case,过去写C习惯用Switch/Case语句,官方文档说通过if-elif实现.所以不妨自己来实现Switch/Case功能. 方法一 通过字典实现 ...

  4. Python里如何实现C中switch...case的功能

    python没有switch case 不过可以通过建立字典实现类似的功能 例子:根据输入的年月日,判断是该年中的第几天 y = int(input('请输入年:')) m = int(input(' ...

  5. C# 中Switch case 返回不止用break

    Switch(temp) { case "A": //跳出循环 break; case "B": //返回值 return var; case "C& ...

  6. js中switch/case分支的值可以是变量或表达式

    在一些高级语言如C#中,switch分支的值只能是常量,而js中可以是变量或表达式: <!DOCTYPE html> <html lang="en"> &l ...

  7. sql中关于case when的一个例子

    SELECT rownum R, a.expert_id as USERID, a.expert_id as TYPE, b.type_desc as TYPE_DESC, a.sex as SEX, ...

  8. Android中在activity中弹出一个popwindow

    //-----在onCreate方法--中------创建popwindow布局   --pop_item--------------------------        View view=Lay ...

  9. Java switch case和数组

    Java switch case 语句 switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch case 语句格式: switch(express ...

随机推荐

  1. Composer的安装以及替换为国内镜像

    Composer的安装以及使用国内镜像 Composer 学习网址 Composer官网 https://getcomposer.org/ Composer中文网 http://www.phpcomp ...

  2. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  3. VMWare虚拟机中网络连接类型对比

    1.NAT NAT:Network Address Translation,网络地址转换:虚拟机的网卡连接到宿主的 VMnet8 上 虚拟机与主机的关系:只能单向访问,虚拟机可以通过网络访问到主机,主 ...

  4. vue:概要

    一.环境 #安装nodejs-官网安装包配置环境变量 node -v #安装webpack npm install webpack -g #安装vue-cli npm install vue-cli ...

  5. 45 | 自增id用完怎么办?

    MySQL 里有很多自增的 id,每个自增 id 都是定义了初始值,然后不停地往上加步长.虽然自然数是没有上限的,但是在计算机里,只要定义了表示这个数的字节长度,那它就有上限.比如,无符号整型 (un ...

  6. The 2019 ICPC China Nanchang National Invitational and International Silk-Road Programming Contest

    目录 Contest Info Solutions A. Attack B. Polynomial E. Interesting Trip F. Sequence G. Winner H. Anoth ...

  7. Angular2日期格式化

    一:组件日期格式化: ts中调用: import {DatePipe} from "@angular/common"; @Component({     providers: [D ...

  8. python 时间等待

    #coding=utf- import time t1=time.time() time.sleep() t2=time.time() print(t2-t1) 输出 3.00304102898

  9. Eclipse中Git的操作

    一.工程初始化为本地库 工程→右键→Team→Share Project→Git 点击Finish即可 二.Eclipse 中忽略不必追踪控制的文件 列如: .classpath 文件 .projec ...

  10. Bean Shell常用内置变量

    JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:写入信息到jmeber.log文件,使用方法:log.info( ...