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

bece9f0fae08fb09b1978fbe7a57916a.png

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

1fe23e56f9316ac94d6f9b72e89a40ac.png
el-data-table整体结构图

587f0b1dec345c23d29531447f393ea7.png
树形结构示例图

90f4005d61feb93718825864caa908aa.png
普通查询示例

14ed258dd5b4772b631469c31405a987.png
日期查询示例

79d7eddceef3bd72babd2e04fe85f9c6.png
新增弹窗示例

7063d2fd00f543e12ce55091c62d0823.png
修改弹窗示例

5686475b416b1a067ca2e3d9dbc35d8f.png
多选删除示例

79ae3262833c18b59a040e69f89e84c6.png
单行删除示例

a76712b0262625614e567703825feeb0.png
特殊查询示例

1d282c7d082698d8cefd73ebd9537e5e.png
自定义弹窗示例

后台接口约定

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

/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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/455829.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Win10无法使用小娜搜索本地应用问题的解决方案

小娜介绍 win10的Cortana小娜是一个功能非常强大的语音和搜索助手,用户可以通过小娜助手搜索任意的文件和应用软件,不过有用户发现win10的小娜搜索不到已安装的本地软件,那么win10小娜助手无法搜索本地应用怎么解决呢?下面小编教大…

样本量

sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare 根据power,effect size,a,决定样本量 # -*- cod…

【Python】 dict 以key名 去重运算

将日期相同的数据统计在一起 a_count [ {create_time: 2020-03-05, total_len: 1, count_invite: 1}, {create_time: 2020-03-11, total_len: 2, count_invite: 2}, {create_time: 2020-03-18, total_len: 2, count_invite: 2}, {create_time: 2020-03-06, total_len: 1, …

Vue相关知识总结

Vue简介 Vue是js的一个库,类似于JQuery Vue当前版本已经发展到2.X版本,并且现在市面上基本使用的都是2.X版本. 现在一些知名的互联网公司,例如滴滴,美团等,都在大量的使用vue 本段内容主要讲解Vue的基本知识和指令,了解vue的基本概念 注意: Vue 不支持 IE8 及以下版本 vue中…

宏块帧内预测的具体过程

对一个宏块进行帧内预测的具体过程如下: (1)对于8x8色度块就选择一种帧内色度预测模式建立相应的帧内预测块; (2)按遍历的方法分别计算4种Intra_16x16帧内预测模式的代价(Rdcost16x16&#xf…

qt获得 cpu 主频信息_高主频有什么用?我们玩了几款3A大作找到答案

[PConline 杂谈]对于热爱游戏的人来说,能在极致特效下流畅运行喜欢的游戏是一件幸事,因此作为影响游戏运算的CPU重要性不容小视。CPU如何判定?众所周知,核心数和主频算是判定一个CPU好坏的主要依据,但大多数CPU产品在高…

解决:关于Git无法提交 index.lock File exists的问题

问题 今天提交代码时,在一次提交,莫名其妙没成功后,再次用git commit -a命令时,出现以下错误,无论是用git还是TortoiseGit等其他客户端都会出现以下这个问题。。 错误日志 $ git commit -a fatal: Unable to create …

span居中

在父元素中加style"text-align:center"; 比如下面这样 <head></head><body><div style"width:300px;border:1px red solid;text-align:center;"><span style"width:100px;">测试</span></div></bo…

打造自己的 APP「冰与火百科」(一):分析定位

回想自己最开始学习 Android 的动力&#xff0c;其实很简单&#xff0c;就是想在手机上看到自己设计的 APP。但是在工作后&#xff0c;一直做的都是「别人」的 APP&#xff0c;偶尔还要做一些自己不太认可的设计和交互&#xff0c;从中获取到的成就感还不及第一次在手机上看到「…

python爬取有道翻译

python爬虫爬取有道翻译教程 编写环境 为了宝宝们能够正确读懂本教程,在正式开始前,宝宝们需要搭建的环境如下: 连接互联网的win10电脑,(win7也可以)Google浏览器(版本无要求)Python(版本3就可以了),如果没有安装的小伙伴可以参考python安装以及版本检测requests库(版本没啥…

PartitionMotionSearch()

Outline: 1、 CFG文件中有关多参考帧的相关选项 2、 多参考帧涉及到的数据结构和全局变量 3、 保存重建图像为参考帧 4、 编码一帧前&#xff0c;设置参考帧列表 5、 多参考帧的使用&#xff08;即参考帧的选择策略问题&#xff09; 6、 遗留问题 1、CFG文件中有关多参考…

bat 发送post请求_get post 请求

HTTP是一个基于TCP/IP来传递数据的通信协议。1.GET和POST请求的区别&#xff1f;a: GET/POST本质上都是TCP链接&#xff0c;GET传body和POST拼参数&#xff0c;理论上都是可行的。b: 实际上HTTP协议对URL长度是没有限制的&#xff1b;限制URL长度大多数是浏览器或者服务器的配置…

Safengine Android so加密

公司让我找一个可以对android&#xff0c;嵌入式和Linux x86平台的so库进行加密的工具&#xff0c;我看搞了两天这个工具&#xff0c;反正也没用上&#xff0c;就把教程发出来了 下载地址&#xff1a;http://www.safengine.com/mobile/download.html 使用方法&#xff1a; 我使…

boltdb 学习和实践

golang boltdb的学习和实践 1. 安装 go get github.com/boltdb/bolt 2.创建和启动数据库 db, err : bolt.Open("my.db", 0600, nil) 其中open的第一个参数为路径,如果数据库不存在则会创建名为my.db的数据库&#xff0c; 第二个为文件操作&#xff0c;第三个参数是可…

【django】使用django-crontab执行django自定义指令

django-crontab 部署 需求&#xff1a;再指定的时间内输入django的自定义指令&#xff0c;来进行一些需求的操作。 使用流程: 1.安装&#xff1a; pip install django-crontab 2.配置 settings.py文件: 再settings.py 文件中添加 django-crontab: INSTALLED_APPS (...django…

滤波问题汇总

1。A:JM86里面,GetStrength这个函数中下面这个数组有什么作用呢??byte BLK_NUM[2][4][4] {{{0,4,8,12},{1,5,9,13},{2,6,10,14},{3,7,11,15}},{{0,1,2,3},{4,5,6,7},{8,9,10,11},{12,13,14,15}}} ;blk_y (mb_y<<2) (blkQ >> 2) ;blk_x (mb_x<<2)…

redis基本类型和使用

redis存储数据的基本类型有&#xff1a;string&#xff08;字符串类型&#xff09;、hash&#xff08;散列类型&#xff09;、list&#xff08;列表类型&#xff09;、set&#xff08;集合类型&#xff09;、zset&#xff08;有序集合类型&#xff09;。 依次做一些练习。redis…

Python与MySQL数据库连接

Python3 MySQL 数据库连接 MySQL 可应用于多种语言&#xff0c;包括 PERL, C, C, JAVA 和 PHP 什么是 PyMySQL&#xff1f; PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库&#xff0c;Python2中则使用mysqldb。 PyMySQL 遵循 Python 数据库 API v2.0 规范&a…

mysql 日志_MySQL日志系统

MySQL日志系统MySQL有两个重要的日志系统&#xff0c;分别是 redo log (重做日志) 和 bin log (归档日志) 。这两种日志有以下三点不同。redo log 是 InnoDB 引擎特有的&#xff1b;binlog 是 MySQL 的 Server 层实现的&#xff0c;所有引擎都可以使用。redo log 是物理日志&am…

盛大游戏杯第十五届上海大学程序设计联赛暨上海金马五校赛

编程1小时&#xff0c;提交4小时 做这种比赛一定要选一个好OJ啊 黑白图像直方图 发布时间: 2017年7月8日 21:00 最后更新: 2017年7月8日 22:38 时间限制: 1000ms 内存限制: 128M 描述 在一个矩形的灰度图像上&#xff0c;每个像素点或者是黑色的或者是白色的。黑色像素点…