普通单元列

简介

普通表格列组件（addColumn）是 TableCrud 中最基础的列组件，用于展示文本内容。该组件可以配置各种显示属性，如宽度、对齐方式、排序、搜索等功能。

用法示例

基础用法

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 添加普通列
  $builder->addColumn('id', 'ID');
  $builder->addColumn('title', '标题');
  $builder->addColumn('content', '内容');
});

使用回调函数配置

Builder::crud(function($builder) {
  // 使用回调函数自定义配置
  $builder->addColumn('username', '用户名', function($component) {
    $component->width(150);
    $component->align('left');
    $component->sortable(true);
    $component->searchable(true);
  });
  
  // 设置固定列
  $builder->addColumn('id', 'ID', function($component) {
    $component->width(80);
    $component->fixed('left');
    $component->align('center');
  });
  
  // 带提示信息的列
  $builder->addColumn('email', '邮箱', function($component) {
    $component->copyable(true);
    $component->remark('点击可复制邮箱地址');
  });
});

使用数组方式配置

Builder::crud(function($builder) {
  // 使用数组方式配置
  $builder->addColumn('title', '标题', [
    'width' => 200,
    'align' => 'left',
    'sortable' => true,
    'searchable' => true,
    'copyable' => true
  ]);
  
  // 配置文本溢出处理
  $builder->addColumn('description', '描述', [
    'width' => 300,
    'textOverflow' => 'ellipsis',
    'popOver' => [
      'trigger' => 'hover',
      'body' => '${description}'
    ]
  ]);
  
  // 配置快速编辑
  $builder->addColumn('status', '状态', [
    'quickEdit' => [
      'type' => 'select',
      'options' => [
        ['label' => '启用', 'value' => 1],
        ['label' => '禁用', 'value' => 0]
      ],
      'saveImmediately' => true
    ]
  ]);
});

高级用法

Builder::crud(function($builder) {
  // 配置快速搜索
  $builder->addColumn('category', '分类', function($component) {
    $component->width(120);
    $component->filterable([
      'options' => [
        ['label' => '全部', 'value' => ''],
        ['label' => '新闻', 'value' => 'news'],
        ['label' => '公告', 'value' => 'notice']
      ]
    ]);
  });
  
  // 配置样式
  $builder->addColumn('price', '价格', function($component) {
    $component->width(100);
    $component->align('right');
    $component->style([
      'color' => 'red',
      'fontWeight' => 'bold'
    ]);
  });
  
  // 配置弹出框
  $builder->addColumn('content', '内容', function($component) {
    $component->width(200);
    $component->textOverflow('ellipsis');
    $component->popOver([
      'trigger' => 'hover',
      'title' => '详细内容',
      'body' => '${content}',
      'placement' => 'top'
    ]);
  });
});

组件参数

列组件属性

使用场景

• ID、序号等基础信息展示
• 文本类内容展示（标题、姓名、地址等）
• 需要排序、搜索的数据列
• 需要快速编辑的简单字段
• 需要复制的内容（邮箱、手机号等）

注意事项

1. name 参数必须与后端返回的数据字段名对应
2. 使用 fixed 固定列时，建议设置明确的宽度
3. textOverflow 为 'ellipsis' 时需要设置列宽度才能生效
4. quickEdit 功能需要先在表格中配置 quickSaveItemApi 接口
5. searchable 和 filterable 可以同时使用，但建议根据实际需求选择
6. 使用 popOver 时，如果内容较长建议设置 textOverflow 为 'ellipsis'
7. copyable 设置为 true 时，点击内容会自动复制到剪贴板
8. 回调函数和数组配置方式可以混合使用，但推荐统一使用一种方式

扩展说明

copyable 配置

// 简单配置
$component->copyable(true);

// 对象配置
$component->copyable([
  'content' => '${field_name}',
  'icon' => 'fa fa-copy',
  'tooltip' => '点击复制'
]);

popOver 配置

// 简单配置
$component->popOver('${content}');

// 对象配置
$component->popOver([
  'trigger' => 'hover', // hover | click
  'title' => '详细信息',
  'body' => '${content}',
  'placement' => 'top', // top | bottom | left | right
  'showIcon' => false
]);

filterable 配置

// 静态选项
$component->filterable([
  'options' => [
    ['label' => '选项1', 'value' => 1],
    ['label' => '选项2', 'value' => 2]
  ]
]);

// 远程选项
$component->filterable([
  'source' => '/api/options',
  'placeholder' => '请选择'
]);