摘要：是一套基于和的表格组件。将的功能进行了封装，并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现，在实现并扩展了表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。
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，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...
摘要：发布，海量图表供你选择，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求轻松操作页面管理，海量物料自由搭配，页面组合可视化操作更得心应手开发调试一体化，集成运行环境零配置运行，开箱即用。 Iceworks 2.7.0 发布，海量图表供你选择 Iceworks，丰富模板一键创建，提供多种垂直领域模板，快速创建项目，支持风格切换，满足个性化需求；轻松操作页...
摘要：在前端页面中，把用纯对象表示，负责显示，两者做到了最大限度的分离。的显示与否和的布尔值有关，还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制，初始值和的结果都是。组件的声明在组件上，则完全没有进入生命周期。 开始前说一说 吐槽 首先， 文章有谬误的地方， 请评论， 我会进行验证修改。谢谢。 vue真是个好东西，但vue的中文文档还有很大的改进空间，有点大杂烩的意思，对于怎么...
摘要：在前端页面中，把用纯对象表示，负责显示，两者做到了最大限度的分离。的显示与否和的布尔值有关，还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制，初始值和的结果都是。组件的声明在组件上，则完全没有进入生命周期。 开始前说一说 吐槽 首先， 文章有谬误的地方， 请评论， 我会进行验证修改。谢谢。 vue真是个好东西，但vue的中文文档还有很大的改进空间，有点大杂烩的意思，对于怎么...
阅读 2442·2021-11-11 16:55
阅读 458·2021-09-04 16:40
阅读 2856·2019-08-30 15:54
阅读 2429·2019-08-30 15:54
阅读 2154·2019-08-30 15:46
阅读 290·2019-08-30 15:43
阅读 3113·2019-08-30 11:11
阅读 2851·2019-08-28 18:17
