可在标题内插入自定义标记元素（如●、○或图标），用css控制样式与位置，并通过js动态更新状态类名或文本。

可以在 `

` 标签内，标题文字后面直接插入自定义标记元素（如 `` 或 ``），再用 CSS 控制样式和位置。

1. HTML 中添加标记元素

在每个折叠项的标题中，手动加入状态标识，例如：

• 用 `●` 表示“已启用”
• 用 `○` 表示“待处理”
• 或使用图标字体（如 layui-icon）：<i class="layui-icon layui-icon-ok"></i>

完整示例：

  

用户管理 ●

  

...

2. CSS 控制对齐与间距

默认 `layui-colla-title` 是 flex 布局，右侧内容会自然靠右。只需加少量样式微调：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

.layui-colla-title .status-dot {
  margin-left: 8px;
  font-size: 14px;
  color: #009688;
  vertical-align: middle;
}

若需更精确控制（如始终贴右），可设：

.layui-colla-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.layui-colla-title span.status-dot {
  margin-left: 0;
  flex: 0 0 auto;
}

3. 动态更新状态（JS 方式）

若状态需根据数据动态变化，可通过 JS 修改对应 `` 的类名或文本：

var $item = $('.layui-colla-item').eq(0);
$item.find('.status-dot').removeClass('status-active status-pending')
  .addClass('status-pending').text('○');

注意：如果面板是动态生成的，记得在 element.render('collapse') 之后再操作 DOM。