刷新指定类型 Element 组件必须传入 type 参数,否则默认重绘所有组件;使用 element.render(type, filter) 可精准刷新,其中 type 为必填字符串(如 'nav'),filter 为可选 lay-filter 值,为空或 undefined 将导致不可控行为。

要刷新指定类型的 Element 组件,必须明确传入组件类型(type)参数,否则 element.render() 会默认重绘所有已注册的 Element 组件,造成不必要的性能开销和状态丢失。
只刷新某一种组件(如导航、选项卡、折叠面板)
使用 element.render(type, filter),其中:
-
type 是必填字符串,比如
'nav'、'tab'、'collapse'、'progress'等,对应具体组件类型 -
filter 是可选参数,为对应组件容器的
lay-filter属性值,用于精准定位某一个实例
例如:
<div class="layui-nav" lay-filter="topNav"></div> <div class="layui-nav" lay-filter="sideMenu"></div>
仅刷新顶部导航(不碰侧边菜单):
element.render('nav', 'topNav');
刷新但不指定 filter:作用于全部该类型组件
如果省略 filter,则所有同类型的组件都会被重新渲染:
-
element.render('tab')→ 刷新页面中所有layui-tab -
element.render('collapse')→ 刷新所有layui-collapse
适用于全局样式更新或批量初始化后统一激活场景,但要注意:可能重置用户已展开/切换的状态。
动态插入内容后的必要操作
当通过 JS 动态向组件容器内添加新 DOM(如新增导航子项、Tab 页签、折叠项)时,Layui 不会自动识别并绑定事件或样式,必须手动调用 render:
- 往
layui-nav里追加了→ 调- …
element.render('nav', 'xxx') - 用
element.tabAdd()添加新 Tab 后,若其内部含layui-progress或layui-collapse→ 需单独对这些子组件调element.render('progress')或element.render('collapse')
注意 filter 不能为空或 undefined
若传入空字符串 '' 或 undefined 作为 filter,行为不可控,可能退化为全量渲染或静默失败。确保:
- 容器确实设置了 lay-filter="xxx"
- 传入的字符串与之完全一致(区分大小写)











