基于Vue2.x, element-ui 2.x,以及开源组件el-form-renderer封装了一个业务组件el-data-table,已在github开源,其目标是:makes restful api crud easily
特点:
1. 使用axios自动发送请求
2.自带新增/修改/删除逻辑(默认新增/修改都是弹窗表单形式)
3.封装了拼接query查询逻辑,只需配置搜索表单即可进行GET请求查询
4.可扩展自定义列按钮
5.自带分页逻辑
6.支持树形结构数据(众所周知,该功能element-ui官方是不支持的)
后台接口约定
以用户接口示例,设其相对路径为:
/api/v1/users
1. 新增
POST /api/v1/users
2. 修改
PUT /api/v1/users/:id
3. 分页查询
GET /api/v1/users?page=1&size=10
其中page与size参数可设置
4. 删除
DELETE /api/v1/users/:id
5. 批量删除
DELETE /api/v1/users/:id1, :id2
适用场景
基于element-ui的应用
更多代码示例,请上github
github地址:https://github.com/FEMessage/el-data-table
npm地址:https://www.npmjs.com/package/el-data-table
我的博客:https://github.com/levy9527/blog