CatchAdmin实战教程(四)Table组件之自定义基础页面

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

（一）后台设置

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

1.1 表单操作 1.1.1 创建Form工厂

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


    public static function from(): string
    {
        return __NAMESPACE__;
    }
}

1.1.2 创建基础Form类

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


    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.1.3 创建Form

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


    // 表名
    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 表格操作 1.2.1 创建Table

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


    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');
    }
}

(二) 前端设置 2.1 创建页面

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

2.2 设置路由

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

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

(三) 菜单配置 3.1 配置一级菜单

3.2 配置列表菜单

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

CatchAdmin实战教程(四)Table组件之自定义基础页面

Java相关栏目本月热门文章