媒介
人人在做营业体系的时刻,许多处所都是列表增编削查,做这些功用占有了人人很长时候,假如我们有相似的营业,半个小时就能够做出一套那是否是很爽呢。
如许我们就能够够有更多的时候进修一些新的东西。我们这套框架对此做了下封装,合适的小伙伴也能够自创封装到本身的框架当中去。中心思想用的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就完成了。
- 检察演示
关于
线上演示地点:http://39.105.188.65:8080/system/channel
现在我正在开辟一个头条的开源项目。能够用此地点检察,这个是用的实在的数据
结束语
表格的增编削查封装已完成, 代码已放到github上,人人能够自行检察umi-react。
假如以为不错,请start一下
我建了一个QQ群,人人加进来,能够一同交换。群号 787846148