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,一经查实,立即删除!

相关文章

样本量

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, …

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

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

python爬取有道翻译

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

PartitionMotionSearch()

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

bat 发送post请求_get post 请求

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

boltdb 学习和实践

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

mysql 日志_MySQL日志系统

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

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

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

Web开发介绍

Web开发介绍 一,认识一个网站 最早的软件都是运行在大型机上的,软件使用者通过“哑终端”登陆到大型机上去运行软件。 后来随着PC机的兴起,软件开始主要运行在桌面上,而数据库这样的软件运行在服务器端,这种Client/Server模式简…

Django简介以及安装

Django简介 1. 认识Django Django是一个高级的Python Web框架,它鼓励快速开发和清洁,务实的设计。由经验丰富的开发人员构建,它负责Web开发的许多麻烦,因此您可以专注于编写应用程序,而无需重新创建轮子。它是免费的…

python基础笔试面试题_python基础面试常见题

Python是目前市面上,我个人认为是最简洁、最优雅、最有前途、最全能的编程语言,没有之一。 2、通过什么途径学习的Python? 通过自学,包括网上查看一些视频,购买一些相关专业的书籍。 3、Python和Java、PHP、C、C#、C等…

django-rest-swagger显示接口备注内容

Swagger是一個API開發者的工具框架,用於生成、描述、調用和可視化RESTful風格的Web服務。總體目標是使客戶端和文件系統服務器以同樣的速度來更新,方法,參數和模型緊密集成到服務器端的代碼中,允許API始終保持同步。 在使用 djan…

安全和连接是IoT联网设备2大挑战

IoT正在推动500亿个联网设备在未来10年内从工业、零售、智能照明、智慧城市、汽车、农业、可穿戴设备、智能建筑、医疗市场涌现出来,ARM处理器部门市场营销总监Ian Smythe表示:“到2020年,消费电子和健康、智慧城市和物流、汽车和运输领域的I…

windows下部署免费ssl证书(letsencrypt)

随着网络的发展,网络安全也越来越重要,对于网站来说,从Http升级到https也是我们要做的首要事情。要实现https,首先我们需要申请一张SSL证书,这篇文章我主要介绍下边这几个方面: 1. SSL简单介绍 2. 免费Lete…

python中什么是关键字参数_如何使用python语言中函数的关键字参数的用法

一般情况下,在调用函数时,使用的是位置参数,即是按照参数的位置来传值;关键字参数是按照定义函数传入的参数名称来传值的。那么,关键字参数怎么使用?工具/原料 python pycharm 截图工具 WPS 方法/步骤 1 打…

【SSL】HTTPS配置全过程

服务器配置https协议 HTTPS,是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 配置HTTPS就需要证书,关于证书方面不做过多解释,只…

输出四位完全平方数_完全平方数中的规律

PS:很近之前自己收集的资料一个正整数如果是另一个整数的完全平方,那么我们就称这个数为完全平方数,也叫做平方数。如:0,1,4,9,16,25,36,49&#…

为企业提供本地销售人员的Universal Avenue获1000万美元A轮融资

为各类B2B企业提供本地销售人员的瑞典初创企业Universal Avenue近日获得了1000万美元的A轮融资。此轮融资由Eight Roads(富达国际的投资机构)领投,原有投资者Northzone和MOOR跟投,加上2015年获得的500万美元种子轮融资&#xff0c…

【Linux分享】Linux常用命令+教程分享

今天分享分为两部分 :) PART01 Linux常用命令分享/ PART02 关于BD面试经验分享 30mins Linux Command: PART 1 你本可以张口就来..... 本篇内容分享的宗旨: 拿下Linux面试 别面试的时候呆呆地说个ls了🚑 本篇分享详细地介绍了常用Linux指令的功能、语法、参…