表格操作

表格默认支持 编辑 和 删除。比较死板，在 0.1.2 版本新增了三个动态插槽，可以添加额外的操作，可以自定义事件。目前只支持按钮组件，当然允许你自定义组件操作。这三个动态操作是依据目前 catchtable 插槽制定的，所以也有一定的局限性。但是对于一般的 CURD 操作而言，已经是简化了很多工作了

table 头部左侧

protected function table(): mixed
{
    // TODO: Implement table() method.
    return Table::make('cms/post')->columns(function (Table $table) {
        // 头部左侧
        $table->headLeftAction(Action::create('创建文章'));
    });
}

如下图所示

表格栏操作

表格栏操作针对表格每一行数据的操作

默认操作前

 // TODO: Implement table() method.
return Table::make('cms/post')->columns(function (Table $table) {
    // 头部左侧
    $table->prependAction(
        Action::update('编辑')->primary()->small()->asText()
    );
});

如下图所示

默认操作后

 // TODO: Implement table() method.
return Table::make('cms/post')->columns(function (Table $table) {
    // 头部左侧
    $table->prependAction(
        Action::update('编辑')->primary()->small()->asText()
    );
});

如下图所示

进阶

action 默认使用的按钮组件，支持任意事件 click change 等等。不光如此，他还是支持前端路由操作。

路由

return Table::make('cms/post')->columns(function (Table $table) {
        // 头部左侧
        $table->headLeftAction(Action::create('创建文章')->route('/cms/articles/create'));
    });

通过 route 方法可以直接调用前端路由，跳转到对应的页面，而无需再在前端进行路由编写，当然这个路由参数时已经注册过的前端路由，不光如何，这次还提供更加便携的操作，动态参数注入。在表格栏操作的时候，例如文章编辑，都是使用动态路由，形如 article/:id/edit 跳转到对应的路由页面。如果单单使用后端渲染是无法做到的，但是新的表格栏操作支持了参数动态注入。如下代码

$table->appendActions(Action::update('编辑')->primary()->route('/cms/articles/create/:id')->small()->asText());

使用下面的代码，可以轻松实现编辑页面，也无需要进行前端代码编写，:id 会被自动替换成对应行的 id 数据。

事件

表格操作还支持事件操作，既可以通过后台操作，也可以通过前端，但建议使用前端，因为后端的都是字符传，太魔法了，不便于后期维护。

点击

下面的代码演示了后端操作，

$table->headLeftAction( Action::create('创建文章')->click(<<<'FUNC'
() => console.log('创建文章')
FUNC
));

这个时候你点击控制台就会发现输出创建文章。当然后端操作的确方便，但是更多的是弊处，有以下几点

• 维护性太差
• 无法导入前端组件
• 无法调用前端方法

所以为了解决这个问题，需要在渲染数据传回前端，在渲染页面前进行 click 方法挂载，在前端页面的 useDynamic hook，添加了 callback 回调

const { table, form, loading } = useDynamic('cms/post/dynamic/r', (table: any) => {
  // 替换掉 click
  table.action.operation.components[0].events.click = () => {
    console.log('Hello 我来替换了')
  }

  // 一定要返回
  return table
})

需要根据实际的 json 结构进行 click 事件替换。这里只针对 table 数据，你可以根据实际项目二次封装，简化这个过程。