资讯专栏INFORMATION COLUMN

D2 Crud,一款简单易用的表格组件

fevin / 1747人阅读

摘要:是一套基于和的表格组件。将的功能进行了封装,并增加了表格的增删改查数据校验表格内编辑等常用的功能。大部分功能可由配置实现,在实现并扩展了表格组件功能的同时,降低了开发难度,减少了代码量,大大简化了开发流程。

D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-CrudElement 的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 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 2.7.0 发布,海量图表供你选择 Iceworks,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求;轻松操作页...

    gitmilk 评论0 收藏0
  • Iceworks 2.7.0 发布,海量图表供你选择

    摘要:发布,海量图表供你选择,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求轻松操作页面管理,海量物料自由搭配,页面组合可视化操作更得心应手开发调试一体化,集成运行环境零配置运行,开箱即用。 Iceworks 2.7.0 发布,海量图表供你选择 Iceworks,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求;轻松操作页...

    ymyang 评论0 收藏0
  • vue生命周期解析并通过表单理解MVVM(不仅理论,图文并茂)

    摘要:在前端页面中,把用纯对象表示,负责显示,两者做到了最大限度的分离。的显示与否和的布尔值有关,还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制,初始值和的结果都是。组件的声明在组件上,则完全没有进入生命周期。 开始前说一说 吐槽 首先, 文章有谬误的地方, 请评论, 我会进行验证修改。谢谢。 vue真是个好东西,但vue的中文文档还有很大的改进空间,有点大杂烩的意思,对于怎么...

    silvertheo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<