el-data-table, 让CRUD更简单👏

el-data-table, 让CRUD更简单👏

基于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官方是不支持的)


el-data-table整体结构图
树形结构示例图
普通查询示例
日期查询示例
新增弹窗示例
修改弹窗示例
多选删除示例
单行删除示例
特殊查询示例
自定义弹窗示例

后台接口约定

以用户接口示例,设其相对路径为:

/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地址:github.com/FEMessage/el

npm地址:npmjs.com/package/el-da

我的博客:github.com/levy9527/blo

编辑于 2019-04-18