前言： 大家对CatchAdmin的Table组件自定义基础页面可能不是很清楚怎么使用的，可以参考这篇文章，只要三个大步骤，即可拥有基础页面包含表单、列表、字段搜索、排序等功能。

（一）后台设置

模块： business ; Model： Bonds ；控制器： Bonds
路由配置： $router->resource('bonds', '\catchAdmin\business\controller\Bonds');
API： business\bonds

1.1 表单操作

1.1.1 创建Form工厂

路径： catch/business/tables/forms/Factory.php

namespace catchAdmin\business\tables\forms;

use catcher\library\form\FormFactory;

class Factory extends FormFactory
{
    public static function from(): string
    {
        return __NAMESPACE__;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

1.1.2 创建基础Form类

路径： catch/business/tables/forms/BaseForm.php

namespace catchAdmin\business\tables\forms;

use catchAdmin\cms\support\DynamicFormFields;
use catcher\library\form\Form;
use catcher\Utils;

abstract class BaseForm extends Form
{
    protected $table = null;

    public function create(): array
    {
        $fields = parent::create(); // TODO: Change the autogenerated stub

        if ($this->table) {
            return array_merge($fields, (new DynamicFormFields())->build(Utils::tableWithPrefix($this->table)));
        }

        return $fields;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.1.3 创建Form

创建Form表单方法说明：
必填方法：required() ; 输入最大长度限制：maxlength(number) ; 所占列数：col(num) ;

namespace catchAdmin\business\tables\forms;

class Bonds extends BaseForm
{
    // 表名
    protected $table = 'business_bonds';

    public function fields(): array
    {
        // TODO: Implement fields() method.
        return [
            self::input('security_code', '代码')->required()->maxlength(11)->col(12),

            self::input('buy_price', '成本价')->col(12),
        ];
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

1.2 表格操作

1.2.1 创建Table

创建表的方法说明：
字段标签：label ; 字段设置：prop
开启排序功能：sortable ; 设置字段所占表格宽度：width
按钮设置：actions ; 搜索设置：withSearch ; API接口设置：withApiRoute
工厂模式创建表单：Factory::create()

namespace catchAdmin\business\tables;

use catcher\CatchTable;
use catchAdmin\business\tables\forms\Factory;
use catcher\library\table\Actions;
use catcher\library\table\HeaderItem;
use catcher\library\table\Search;

class Bonds extends CatchTable
{
    public function table(): array
    {
        // TODO: Implement table() method.
       return $this->getTable('business_bonds')
                   ->header([
                       // sortable：开启页面排序功能   width：字段所占表格宽度
                       HeaderItem::label('编号')->prop('id')->sortable()->width(80),

                       HeaderItem::label('代码')->prop('code')->sortable()->width(100),

                       HeaderItem::label('价格')->prop('price')->sortable()->width(100),

                       HeaderItem::label('更新时间')->prop('updated_at')->sortable()->width(150),

                       HeaderItem::label('操作')->actions([
                           Actions::update(),//更新按钮
                           Actions::delete() //删除按钮
                       ])
                   ])
                   // 字段搜索功能
                   ->withSearch([
                       Search::input('code', '代码')->clearable(true),
                   ])
                   ->withBind()
                   // 后端Api接口地址
                   ->withApiRoute('business/bonds')
                   // 创建按钮
                   ->withActions([
                       Actions::create()
                   ])
                   ->render();
    }

    // 使用工厂模式创建表单
    protected function form()
    {
        // TODO: Implement form() method.
        return Factory::create('bonds');
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

(二) 前端设置

2.1 创建页面

方便与后端的接口统一，这里统一设置路径：src/views/business/bonds/index.vue
友情提示： 一定要在页面创建表单(:formCreate="formCreate")，否则表单页面会显示为空！

<template>
  <catch-table
    :formCreate="formCreate"
    v-bind="table"
  />
</template>

<script>
import render from '@/views/render-table-form'

export default {
  name: 'index',
  mixins: [render],
  data() {
    return {
      tableFrom: 'table/business/bonds'
    }
  }
}
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2.2 设置路由

路由地址指向：当前路径bonds目录下的index.vue

export default {
  // bonds列表
  bonds: () => import('./bonds')
}
1
2
3
4

(三) 菜单配置

3.1 配置一级菜单

3.2 配置列表菜单

结尾语： 相信你看到这里应该对CatchAdmin的Table组件自定义基础页面有个基本的掌握了，若对你有所帮助，请不要忘了用你的小手点点关注、点赞、收藏哟！