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

D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。D2-Crud 将 Element 的功能进行了封装，并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 json 实现，在实现并扩展了 Elememt 表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。

GitHub：https://github.com/d2-projects/d2-crud

文档：https://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/

示例：https://d2-projects.github.io/d2-admin/#/demo/d2-crud/index

示例部署在 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)
})

一个简单的表格示例：

<template>
  <div>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
          title: '日期',
          key: 'date'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '地址',
          key: 'address'
        }
      ],
      data: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'