摘要:是一套基于和的表格组件。将的功能进行了封装,并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现,在实现并扩展了表格组件功能的同时,降低了开发难度,减少了代码量,大大简化了开发流程。
D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 json 实现,在实现并扩展了 Elememt 表格组件功能的同时,降低了开发难度,减少了代码量,大大简化了开发流程。
GitHub:https://github.com/d2-project...
文档:https://d2-projects.github.io...
示例:https://d2-projects.github.io...
示例部署在 Github Pages 如果您的网络不太好(示例项目中包含大量示例,体积较大),请完整克隆 项目 在本地启动。功能简介
继承了 Element 中表格所有功能
表格新增数据
表格修改数据
表格删除数据
使用 Element 中的组件渲染表格内容和表单编辑内容
表单编辑校验
表格内直接编辑模式
如何使用使用npm安装:
npm i element-ui @d2-projects/d2-crud -S
使用yarn安装:
yarn add element-ui @d2-projects/d2-crud
在 main.js 中写入以下内容:
import Vue from "vue" import ElementUI from "element-ui" import "element-ui/lib/theme-chalk/index.css" import D2Crud from "@d2-projects/d2-crud" Vue.use(ElementUI) Vue.use(D2Crud) new Vue({ el: "#app", render: h => h(App) })
一个简单的表格示例:
下图是上述代码片段的渲染结果:
示例 新增数据
演示地址:https://d2-projects.github.io...
演示地址:https://d2-projects.github.io...
演示地址:https://d2-projects.github.io...
演示地址:https://d2-projects.github.io...
演示地址:https://d2-projects.github.io...
一个带有编辑删除功能的例子与直接使用 Element UI 的代码对比
使用D2 Crud:
直接使用Element UI的表格组件:
D2 Projects编辑 删除
团队主页:https://github.com/d2-projects
如果你看完了,并且觉得还不错,希望可以到团队主上给我们的项目点一个 star 作为你对我们的认可与支持,谢谢。
加入小组开源项目组官方公众号,关注及时获得最新更新资讯、文档地址、相关的技术文章:
2000 人 QQ 交流群,及时答疑解惑:
如果需要加微信群,请关注公众号在底部菜单获取二维码。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97356.html
摘要:发布,海量图表供你选择,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求轻松操作页面管理,海量物料自由搭配,页面组合可视化操作更得心应手开发调试一体化,集成运行环境零配置运行,开箱即用。 Iceworks 2.7.0 发布,海量图表供你选择 Iceworks,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求;轻松操作页...
摘要:发布,海量图表供你选择,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求轻松操作页面管理,海量物料自由搭配,页面组合可视化操作更得心应手开发调试一体化,集成运行环境零配置运行,开箱即用。 Iceworks 2.7.0 发布,海量图表供你选择 Iceworks,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求;轻松操作页...
摘要:在前端页面中,把用纯对象表示,负责显示,两者做到了最大限度的分离。的显示与否和的布尔值有关,还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制,初始值和的结果都是。组件的声明在组件上,则完全没有进入生命周期。 开始前说一说 吐槽 首先, 文章有谬误的地方, 请评论, 我会进行验证修改。谢谢。 vue真是个好东西,但vue的中文文档还有很大的改进空间,有点大杂烩的意思,对于怎么...
阅读 2601·2021-11-11 16:55
阅读 643·2021-09-04 16:40
阅读 3038·2019-08-30 15:54
阅读 2592·2019-08-30 15:54
阅读 2371·2019-08-30 15:46
阅读 374·2019-08-30 15:43
阅读 3197·2019-08-30 11:11
阅读 2952·2019-08-28 18:17