简介

模板组件用于在表格列中使用自定义模板展示内容，支持灵活的数据渲染和HTML格式。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 添加模板列
  $builder->addColumnTpl('info', '信息', '<div>${name} - ${age}岁</div>');
});

自定义配置

Builder::crud(function($builder) {
  // 复杂模板
  $builder->addColumnTpl('user_info', '用户信息', 
    '<div class="user-card">
      <strong>${username}</strong>
      <br/>
      <small>${email}</small>
    </div>',
    function($component) {
      $component->width(200);
    }
  );
  
  // 条件渲染模板
  $builder->addColumnTpl('status_display', '状态', 
    '<% if (data.status == 1) { %>
      <span class="label label-success">正常</span>
    <% } else { %>
      <span class="label label-danger">禁用</span>
    <% } %>',
    [
      'width' => 100
    ]
  );
});

使用表达式

Builder::crud(function($builder) {
  // 格式化显示
  $builder->addColumnTpl('price_display', '价格', 
    '<span class="text-danger">¥ <%= (data.price / 100).toFixed(2) %></span>'
  );
  
  // 链接模板
  $builder->addColumnTpl('link', '链接', 
    '<a href="/detail?id=${id}" target="_blank">${title}</a>'
  );
});

组件参数

参数名	类型	默认值	说明
name	string	必填	字段名称，对应数据库字段
label	string	必填	列标题，显示在表格头部
tpl	string	必填	模板字符串
option	callable\|array	[]	配置选项，可以是回调函数或数组

模板组件属性

属性名	类型	默认值	说明
tpl	string	-	模板内容
className	string	-	CSS 类名
width	int\|string	-	列宽度
align	string	-	水平对齐方式
vAlign	string	-	垂直对齐方式

模板语法

变量输出

${字段名}        // 直接输出字段值
<%= 表达式 %>    // 输出表达式结果

条件判断

<% if (data.status == 1) { %>
  显示内容
<% } else { %>
  其他内容
<% } %>

循环

<% data.list.forEach(function(item) { %>
  <div>${item.name}</div>
<% }) %>

使用场景

复杂的内容展示
多字段组合显示
条件渲染内容
自定义HTML格式
链接和按钮组合

注意事项

tpl 参数是必填的，定义了模板内容
支持完整的 JavaScript 表达式
可以使用 data 对象访问当前行的所有数据
支持HTML标签和CSS样式
注意模板中的引号转义