element table 怎么知道点击的是第几行_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地址：https://github.com/FEMessage/el-data-table

npm地址：https://www.npmjs.com/package/el-data-table

我的博客：https://github.com/levy9527/blog

element table 怎么知道点击的是第几行_el-data-table, 让CRUD更简单??相关推荐

10.8 UiPath 数据筛选Filter Data Table的介绍和使用(Excel数据写入另一个Excel中)
UiPath数据筛选Filter Data Table的介绍和使用一.数据筛选(Filter Data Table)的介绍二.Filter Data Table在UiPath中的使用 ) 一.数据 ...
R packages for big data:data.table
转载自:http://site.douban.com/182577/widget/notes/15728235/note/348517696/ data.table可以看作是对大家熟悉的R数据格式da ...
vue data拓展运算符_您应该知道的R data.table符号和运算符
vue data拓展运算符当您利用R data.table代码的特殊符号和功能时,它会变得更加高效且优雅. 考虑到这一点,我们将研究一些子集,计数和创建新列的特殊方法. 对于此演示,我将使用2019 ...
您应该知道的R data.table符号和运算符
当您利用R data.table代码的特殊符号和功能时,它会变得更加高效且优雅. 考虑到这一点,我们将研究一些子集,计数和创建新列的特殊方法. 对于此演示,我将使用2019年Stack Overflo ...
kayui进行添加_关于layui 实现点击按钮添加一行(方法渲染创建的table)
目标:layui 实现点击按钮添加一行解决方案: 方案1.table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个标签: 方案2.table 是用方法渲染的方式创建的 ...
element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
element若依菜单点击改变背景色
element&若依菜单点击改变背景色 element只提供了激活时候改变字体的颜色找到激活的菜单查看代码从#app开始的,只能整个复写,加上激活的class: is-active &l ...
Html table 页实现点击选中tr行改变背景颜色
Html table 页实现点击选中tr行改变背景颜色 table 表格展示数据时没有选中的效果,如果对展示数据做了一些操作会导致不太容易分辨,所以选中效果就很重要,而这个事件需要作用于整个 ...
layui table 弹出层刷新_layui 关闭open弹出框刷新table表格页面的方法
layui 关闭open弹出框刷新table表格页面的方法如下所示: 保存后刷新table表格源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...

element table 怎么知道点击的是第几行_el-data-table, 让CRUD更简单??

特点：

适用场景

element table 怎么知道点击的是第几行_el-data-table, 让CRUD更简单??相关推荐

最新文章

热门文章