前言
大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢。
这样我们就可以有更多的时间学习一些新的东西。我们这套框架对此做了下封装,适合的小伙伴也可以借鉴封装到自己的框架当中去。核心思想用的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 (
基础 Table
);
}
}
export default BasicTable;
查看演示
完整的一套增删改查
创建list.js, 来配置和增强我们的table,注意我们需要使用Btable。
import { BTable } from 'bcomponents';
class List extends React.Component {
render() {
return (
columns={columns}
{...this.props}
/>
);
}
}
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 (
url='/api/table'
getData={getData}
>
{
({getFieldDecorator}) => (
{getFieldDecorator('name', {
initialValue: '',
validateFirst: true,
rules: [
formValid.require(),
formValid.name(),
],
})(
)}
)
}
);
}
}
export default BasicTable;
这里的`BTable.Search`很简单,我们只需传入getData属性方法就可以完成查询操作。
创建其实也很简单,配置`BTable.Create`的url和getData参数。然后只需在组件内写我们的Form表单项就可以了,是不是很简单。
至此。我们的创建和查询就完成了
添加编辑功能。编辑和删除的操作在列表上,所以我们需要在list.js当中去完成.添加BTable.Update模板
visible={visible}
url={`/api/table/${updateData.id}`}
onCancel={this.onUpdateCancel}
getData={this.props.getData}
>
{
({getFieldDecorator}) => (
{getFieldDecorator('name', {
initialValue: updateData.name,
validateFirst: true,
rules: [
formValid.require(),
formValid.name(),
],
})(
)}
)
}
配置项也很简单,配置url,visible和getData就可以了,接着完善我们的FormItem就可以了。是不是很简单
添加删除功能
BTable.Del({
url: `/api/table/${data.id}`,
getData,
})
这是最简单的了,传一个url和getData就完成了。
查看演示
关于
目前我正在开发一个头条的开源项目。可以用此地址查看,这个是用的真实的数据
结束语
表格的增删改查封装已经完成, 代码已放到github上,大家可以自行查看umi-react。
如果觉得不错,请start一下
我建了一个QQ群,大家加进来,可以一起交流。群号 787846148