2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

🚀 从 2.6.11 开始,对 laytpl 输出 HTML 语句和 table 默认 escape 属性的重要调整

Done
owner
Opened this issue  
2022-06-06 18:57

从 layui v2.6.11 开始,对 laytpl 模板和 table escape 属性进行了重要调整、
升级时请注意阅读更新日志,或者直接参考以下说明进行适配。

1. laytpl 模板的两项重要变化:

  • [调整] laytpl 组件的输出语句 {{ d.field }} 默认开启编码。与 {{= d.field }} 等同
  • [新增] laytpl 组件的原始输出语句:{{- d.field }},若需渲染 HTML,可采用该语句

请各位升级时按照实际情况进行调整,特别是需要渲染 HTML 内容的,记得采用 {{- }} 语句
这里也写了专门的一个示例供大家参考:https://codepen.io/sentsim/pen/qBxyQRd

输入图片说明

以下以 layuiAdmin 中 layout.html 为例:

升级 Layui 后,将原来的 lay-href 所在的模板:

{{ hasChildren ? '' : 'lay-href="'+ url +'"' }} 

改成:

{{- hasChildren ? '' : 'lay-href="'+ url +'"' }}

其他模板处也可按照上述说明进行对应调整。

2. table 的 escape 属性的重要调整

  • [调整] table 组件的 escape 属性默认为 true,即默认开启编码功能(之前默认为 false)

因此如果需要渲染 HTML 的,需要在 table.render(options) 中加上以下属性:

table.render({
  elem: '#id',
  escape: false // 不开启 HTML 编码
})

或者也可以在 cols 属性中对指定表头设定 escape: false(需升级到 v2.7.5 或以上版本)

Comments (14)

贤心 created任务
贤心 changed description
贤心 changed title
贤心 changed description
贤心 changed title
贤心 added
 
分享
label
贤心 changed description
贤心 changed description
贤心 changed title
Expand operation logs

借个地方
我提的Issues
https://gitee.com/sentsin/layui/issues/I5B5X5
大佬给我标记 已完成。
我解决了,原因是table组件默认开启了escape:true
注:从 v2.6.11 开始,默认开启。
所以在渲染表格时,escape: false 。我不会修改第三方组件源码,只想到这个办法。

嗯,所以升级还是要详细看更新日志的。你这个办法就可以兼容旧的代码写法。

谢谢大佬,我确实是看了更新日志,才想到了解决办法。

这个更新太坑了,感谢此说明。
我是从2.5.7升级的2.6.13,确实感到不好用了。
好多样式都变了。。。。

你从 2.5.7 升级而来,本身跨度就非常大,中间还有一个 2.6.0 的调整幅度也大。需好好结合过往的更新日志。

想借此楼问下作者,对 laytpl 组件变化的目的是什么呢?
前端框架,建议还是要兼容老版本,既然是框架,除非无法做到兼容,否则应该尽量延续之前的写法。
这个对再用项目,影响非常之大,给人的直观感受就是新版本不太友好了。

这个更新主要是为了默认开启对 xss 字符的过滤。
其调整所造成的影响并不是那么大,主要只对需要输出 html 的有所影响,但也只需要按照新的语法加一句 {{- }} 即可。

从长远来说,利大于弊。

贤心 translation missing: en.project.new_issues_operate_log.link_issue(Normal)升级后解析模板好像出问题了。
贤心 translation missing: en.project.new_issues_operate_log.link_issue(Normal)🍀 发表 issue 的正确方式
贤心 added
 
常见
label
贤心 translation missing: en.project.new_issues_operate_log.link_issue(Normal)从2.6.8升级到v2.7.4后数据表格templet的渲染问题

输入图片说明

@{ for (int i = 0; i @ViewBag.listResult[0].TaskName } }
任务名称 定时任务周期 开启 关闭
@ViewBag.listResult[0].Frequency

加上:

escape: false // 不对 HTML 进行编码

参考:https://layui.gitee.io/v2/docs/modules/table.html#escape

为什么好多图标都用不显示了呢?

可能是你的资源跨域导致,
参考这个解决:ttps://layui.gitee.io/v2/docs/element/icon.html#access

贤心 changed description
贤心 changed title
贤心 changed description
贤心 changed description
贤心 changed description
贤心 translation missing: en.project.new_issues_operate_log.link_issue(Normal)贤心大佬,请问layui更新为2.7版本以后,动态表格不编译数据中的html怎么办呢
贤心 translation missing: en.project.new_issues_operate_log.link_issue(Normal)🚀 重磅:Layui v2.8.0-beta 版已发布

输入图片说明
我想在数据表格 里面渲染 html 但是不得行~~

贤心 translation missing: en.project.new_issues_operate_log.link_issue(Normal)更换layui 最新版本后页面404
贤心 changed description
贤心 changed description
贤心 changed description
贤心 changed description
贤心 translation missing: en.project.new_issues_operate_log.link_issue(Normal)自定义laytpl的open和close 后,在页面中使用table后,会出现部分内置模板代码
贤心 changed issue state from 待办的 to 已完成
贤心 translation missing: en.project.new_issues_operate_log.link_issue(Normal)路由规则

Sign in to comment

Status
Assignees
Milestones
Pull Requests
Successfully merging a pull request will close this issue.
Branches
Planed to start   -   Planed to end
-
Top level
Priority
参与者(7)
92529 sentsin 1578917144 3024056 hery008 1644567291 637575 kuangzhif 1578929921
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

Search

344bd9b3 5694891 D2dac590 5694891