# 表格组件

WARNING

表格组件目前可以完成正常的 85% 的操作,部分需求请回归正常的页面开发。再使用之前,请熟悉 element table 组件。 目前基础模块有大量案例可供参考。具体查看代码。有问题请去论坛提问 (opens new window),请不要在群里问,重复的问题太多。

# 头部

$table->header('ID', 'id'): HeaderItem

# 设置多选

$headerItem->selection();

# 设置宽度

$headerItem->width(string $width);

# 设置居中

$headerItem->alignCenter();

# 设置居右

$headerItem->alignRight();

# 设置可排序

$headerItem->sortable();

# 导出

导出方法是回调函数,它允许导出时候对字段进行数据处理

$headerItem->export(function($value, $iitem){
    return $value == UsersModel::ENABLE ? '正常' : '关闭';
});

# 设置操作(column)

设置更新和删除操作

$headerItem->actions([
    Action::update(), Action::delete()
])

# 固定列

$headerItem->fixed();

# 隐藏列

$headerItem->hidden();

# 不导出

$headerItem->dontImport();

# 关联字段

$headerItem->relations($fields);

当访问用户列表的时候,如果需要查询用户关联的角色,那么就可以使用该方法查询出角色的字段.

首先在 UsersModel 定义了关联关系

public function roles() {
    // 多对多的关系
}
$headerItem->prop('roles')->label('角色')->relations('id');

这里的 prop 的参数就是代表 用户模型的 roles() 方法的名称,也就是关联关系的名称,relations() 里面就是查询的字段

# table 列的插槽

这些组件提供了列的数据可动态操作,除了内置的组件,自己也可以自定义列的插槽组件

  • component 组件
$headerItem->component(string $name, string $updateField = '', $options = [])
  • switch 组件
$headerItem->switch(array $options = [], $updateFields = null)

TIP

可以使用 Form::options()->add('文字', 1)->render()

  • edit 组件
$headerItem->edit($updateFields = null)
  • eidtNumber 组件
$headerItem->editNumber($updateFields = null)
  • select 组件
$headerItem->select(array $options, $updateFields = null)
  • preview 组件(预览组件)
$headerItem->preview($field = null)
  • 下载 组件
$headerItem->download($field = null)
  • 跳转 组件
$headerItem->url($field = null)
  • 复制 组件
$headerItem->copy($field = null)

# 可以直接使用的快捷方法

  • 设置ID
    $table->id(bool $selection = true, string $field = '')
    
  • 设置开始时间
    $table->createdAt()
    
  • 设置更新时间
  $table->updatedAt()
  • 设置状态列
    $table->status(bool $switch = true, string $field = 'status')
    
  • 设置排序列
    $table->sorts(bool $edit = false, string $field = 'sort')
    
  • 设置操作列(默认更新+删除)
      $table->operations(array $actions = [])
    

# 表格

# 操作

$table->actions(function($table){
    $table->store();
    // 导出按钮
    $table->export('users')
})

# 设置路由(后端)

$table->apiRoute('users');

# 默认搜索

如果表格需要默认搜索条件,那么可以使用

$table->where(function($model){
    return $model->where('condition', $value);
})

# 查询后

如果需要对表格的列表数据在返回前做一次处理,那么可以使用 dealWithList

$table->dealWithList(function($data){
    // 这里处理数据
})

# 数据权限

首先需要在使用的模型中引入 \CatchAdmin\Permissions\Models\DataRangeScopeTrait trait,然后使用

$table->useDataRange()

就可以实现数据权限功能了

# 树形 table

$table->toTreeTable()

如果树形结构需要默认展开,那么使用

$table->toTreeTable()->expandAll()

# 设置新增的 Dialog 宽度

$table->dialogWidth('35%')

# 表格排序

$table->sort(function($query){
    // 这里使用排序
})

# 绑定模式

$table->withBind()

TIP

使用该方法之后,前端 catch-table 可以更加简洁的使用。注意看之后前端的说明

# 设置强制更新组件

  table->forceUpdate()

# 导出

$table->export(string $exportRoute);

# 搜索

$table->search([
    Search::like();
]);

# Search 搜索组件

  • 设置 %模糊 搜索

    Search::startLike(string $name, $title)
    
  • 设置%模糊%搜索

    Search::like($name, $placeholder)
    
  • 设置模糊%搜索

    Search::endLike(string $name, $title)
    
  • 设置 name, 默认 name 搜索

    Search::name()
    
  • 设置 status, 默认 status 状态搜索

    Search::status()
    
  • 设置 startAt, 默认 start_at 开始时间搜索

    Search::startAt(string $name = 'start_at', string $title = '开始时间')
    
  • 设置 endAt, 默认 end_at 结束时间搜索

    Search::endAt(string $name = 'end_at', string $title = '结束时间')
    
  • 设置最小值

    Search::min(string $name, $title)
    
  • 设置最大值

    Search::max(string $name, $title)
    

TIP

Form 组件的方法, Search 组件一样可以使用。根本上来说,Search 组件是由 Form 组件包装的