前言
大家在做业务系统的时候, 很多地方都是列表增删改查, 做这些功能占据了大家很长时间, 如果我们有类似的业务, 半个小时就能做出一套那是不是很爽呢.
这样我们就可以有更多的时间学习一些新的东西. 我们这套框架对此做了下封装, 适合的小伙伴也可以借鉴封装到自己的框架当中去. 核心思想用的 React
高阶组件解耦, 接下来我们看看怎么用.
基础用法
导入我们的业务组件
import { BTable } from 'bcomponents';
写好我们的页面模板. 调用 BTable 的高阶组件 BTable.tableEffectHoc, 传入 url 和 columns 参数就可以了, 是不是很简单
- @BTable.tableEffectHoc({
- url: '/api/table/list', //url 参数
- columns: columns // table columns 参数
- })
- class BasicTable extends React.Component {
- render() {
- return (
- <div style={{marginBottom: '20px'}}>
基础 Table
- </div>
- );
- }
- }
- export default BasicTable;
查看演示
完整的一套增删改查
创建 list.JS, 来配置和增强我们的 table, 注意我们需要使用 Btable.
- import { BTable } from 'bcomponents';
- class List extends React.Component {
- render() {
- return (
- <React.Fragment>
- <BTable
- columns={columns}
- {...this.props}
- />
- </React.Fragment>
- );
- }
- }
- export default List;
写我们的页面模板, 完成创建和查询的操作. 我们这次用了 BTable.Search 和 BTabLe.Create 来快速完成我们的查询和创建
- import { BTable } from 'bcomponents';
- import { Row, Col, Input, Form } from 'antd';
- import ListTable from './_components/list';
- const Search = BTable.Search;
- const Create = BTable.Create;
- const FormItem = Form.Item;
- @BTable.tableEffectHoc({
- url: '/api/table/list',
- BTable: ListTable,
- })
- class BasicTable extends React.Component {
- render() {
- const {getData} = this.props;
- return (
- <React.Fragment>
- <Row justify='space-between' style={{ marginBottom: '20px' }}>
- <Col span={12}>
- <Search getData={getData} />
- </Col>
- <Col span={12} style={{textAlign: 'right'}}>
- <Create
- url='/api/table'
- getData={getData}
- >
- {
- ({getFieldDecorator}) => (
- <React.Fragment>
- <FormItem {...formItemLayout} label="名称">
- {getFieldDecorator('name', {
- initialValue: '',
- validateFirst: true,
- rules: [
- formValid.require(),
- formValid.name(),
- ],
- })(
- <Input placeholder="请输入渠道" />
- )}
- </FormItem>
- </React.Fragment>
- )
- }
- </Create>
- </Col>
- </Row>
- </React.Fragment>
- );
- }
- }
- export default BasicTable;
这里的 BTable.Search 很简单, 我们只需传入 getData 属性方法就可以完成查询操作.
创建其实也很简单, 配置 BTable.Create 的 url 和 getData 参数. 然后只需在组件内写我们的 Form 表单项就可以了, 是不是很简单.
至此. 我们的创建和查询就完成了
添加编辑功能. 编辑和删除的操作在列表上, 所以我们需要在 list.JS 当中去完成. 添加 BTable.Update 模板
- <Update
- visible={visible}
- url={`/api/table/${updateData.id}`}
- onCancel={this.onUpdateCancel}
- getData={this.props.getData}
- >
- {
- ({getFieldDecorator}) => (
- <React.Fragment>
- <FormItem {...formItemLayout} label="名称">
- {getFieldDecorator('name', {
- initialValue: updateData.name,
- validateFirst: true,
- rules: [
- formValid.require(),
- formValid.name(),
- ],
- })(
- <Input placeholder="请输入渠道" />
- )}
- </FormItem>
- </React.Fragment>
- )
- }
- </Update>
配置项也很简单, 配置 url,visible 和 getData 就可以了, 接着完善我们的 FormItem 就可以了. 是不是很简单
添加删除功能
BTable.Del({ url: `/api/table/${data.id}`, getData, })
这是最简单的了, 传一个 url 和 getData 就完成了.
查看演示
关于
BTable 文档地址
线上演示地址: http://39.105.188.65:8080/system/channel
目前我正在开发一个头条的开源项目. 可以用此地址查看, 这个是用的真实的数据
结束语
表格的增删改查封装已经完成, 代码已放到 GitHub 上, 大家可以自行查看 umi-react. 如果觉得不错, 请 start 一下
来源: https://www.cnblogs.com/qiaojie/p/9990389.html