当前位置:网站首页>CatchAdmin实战教程(四)Table组件之自定义基础页面
CatchAdmin实战教程(四)Table组件之自定义基础页面
2022-08-10 09:35:00 【Jack_num1】
前言: 大家对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
<?php
namespace catchAdmin\business\tables\forms;
use catcher\library\form\FormFactory;
class Factory extends FormFactory
{
public static function from(): string
{
return __NAMESPACE__;
}
}
1.1.2 创建基础Form类
路径:catch/business/tables/forms/BaseForm.php
<?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.1.3 创建Form
创建Form表单方法说明:
必填方法:required()
; 输入最大长度限制:maxlength(number)
; 所占列数:col(num)
;
<?php
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 表格操作
1.2.1 创建Table
创建表的方法说明:
字段标签:label
; 字段设置:prop
开启排序功能:sortable
; 设置字段所占表格宽度:width
按钮设置:actions
; 搜索设置:withSearch
; API接口设置:withApiRoute
工厂模式创建表单:Factory::create()
<?php
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');
}
}
(二) 前端设置
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>
2.2 设置路由
路由地址指向:当前路径
bonds
目录下的index.vue
export default {
// bonds列表
bonds: () => import('./bonds')
}
(三) 菜单配置
3.1 配置一级菜单
3.2 配置列表菜单
结尾语: 相信你看到这里应该对CatchAdmin的Table组件自定义基础页面有个基本的掌握了,若对你有所帮助,请不要忘了用你的小手点点关注、点赞、收藏哟!
边栏推荐
- [Internet of Things Architecture] The most suitable open source database for the Internet of Things
- 13 【script setup 总结】
- J9 digital science: Web 3.0 is about data ownership or decentralized?
- 【API Management】What is API Management and why is it important?
- 地平线:面向规模化量产的智能驾驶系统和软件开发
- [Metaverse Omi Says] Listen to how Rabbit Fan Rabbit creates a new era of trendy play from virtual to reality
- 【API架构】REST API 行业辩论:OData vs GraphQL vs ORDS
- [Metaverse Omi Says] See how UCOUCO integrates performance art into the Metaverse
- I don't want to do accounting anymore, Die changed to a new one, moved forward bravely, and finally successfully passed the career change test to double his monthly salary~
- Spotify expresses its architectural design using the C4 model
猜你喜欢
[OAuth2] Nineteen, OpenID Connect dynamic client registration
Defending risks with technology and escorting cloud native | Tongchuang Yongyi X Boyun held a joint product launch conference
IDEA中xml文件头报错:URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs)
2022-08-09 第六小组 瞒春 学习笔记
DeepFake换脸诈骗怎么破?让他侧个身
关于编程本质那些事
JWT: To own me is to have power
"Microservice Architecture" Arrangement and Choreography - Different Models for Making Systems Work Together
【API Management】What is API Management and why is it important?
The first offline workshop in 2022!Data application experience day for application developers is coming | TiDB Workshop Day
随机推荐
【API 管理】什么是 API 管理,为什么它很重要?
【物联网架构】最适合物联网的开源数据库
jq封装树形下拉选择框组件
「微服务架构」编曲与编舞——让系统协同工作的不同模式
IDEA中xml文件头报错:URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs)
Vivado时序约束中Tcl命令的对象及属性
Fourier series and Fourier transform
PTA Exercise 2.1 Simple Calculator
Tencent releases the second-generation version of the quadruped robot Max, which completes jumps and somersaults on the plum blossom pile
How to break the DeepFake face-changing scam?turn him over
mysql千万级别数据库优化
绘制温度曲线图;QChart,
【REST架构】OData、JsonAPI、GraphQL 有什么区别?
微信小程序--》小程序生命周期和WXS使用
2 模块一:科研思维培养
日期类(暑假每日一题 19)
Hugo NexT主题升级记录
【API架构】REST API 行业辩论:OData vs GraphQL vs ORDS
Lasso回归(Stata)
【软考 系统架构设计师】案例分析⑥ Web应用系统架构设计