功能简介

• 继承了 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 弄'        },        {          date: '2016-05-03',          name: '王小虎',          address: '上海市普陀区金沙江路 1516 弄'        }      ]    }  }}</script>复制代码下图是上述代码片段的渲染结果：
示例新增数据
演示地址：d2-projects.github.io/d2-admin/#/…
修改数据
演示地址：d2-projects.github.io/d2-admin/#/…
删除数据
演示地址：d2-projects.github.io/d2-admin/#/…
表单校验
演示地址：d2-projects.github.io/d2-admin/#/…
表格内编辑
演示地址：d2-projects.github.io/d2-admin/#/…
一个带有编辑删除功能的例子与直接使用 Element UI 的代码对比使用D2 Crud：
<template>  <div>    <d2-crud      ref="d2Crud"      :columns="columns"      :data="data"      index-row      selection-row      :rowHandle="rowHandle"      :form-template="formTemplate"      @row-edit="handleRowEdit"      @row-remove="handleRowRemove"/>  </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 弄'          },          {            date: '2016-05-03',            name: '王小虎',            address: '上海市普陀区金沙江路 1516 弄'          }        ],        rowHandle: {          edit: {            size: 'mini'          },          remove: {            size: 'mini'          }        },        formTemplate: {          date: {            title: '日期',            value: ''          },          name: {            title: '姓名',            value: ''          },          address: {            title: '地址',            value: ''          }        }      }    },    methods: {      handleRowEdit ({index, row}, done) {        this.$message({          message: '编辑成功',          type: 'success'        })        done()      },      handleRowRemove ({index, row}, done) {        this.$message({          message: '删除成功',          type: 'success'        })        done()      }    }  }</script>复制代码直接使用Element UI的表格组件：
<template>  <div>    <el-table      :data="tableData">      <el-table-column        type="selection"        width="55">      </el-table-column>      <el-table-column        type="index"        width="50">      </el-table-column>      <el-table-column        prop="date"        label="日期">      </el-table-column>      <el-table-column        prop="name"        label="姓名">      </el-table-column>      <el-table-column        prop="address"        label="地址">      </el-table-column>      <el-table-column label="操作">        <template slot-scope="scope">          <el-button            size="mini"            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>          <el-button            size="mini"            type="danger"            @click="handleDelete(scope.$index, tableData)">删除</el-button>        </template>      </el-table-column>    </el-table>    <el-dialog      title="编辑"      :visible.sync="showDialog">      <el-form>        <el-form-item label="日期">          <el-input v-model="form.date"></el-input>        </el-form-item>        <el-form-item label="姓名">          <el-input v-model="form.name"></el-input>        </el-form-item>        <el-form-item label="地址">          <el-input v-model="form.address"></el-input>        </el-form-item>      </el-form>      <span slot="footer" class="dialog-footer">        <el-button type="primary" @click="handleEditSave">确 定</el-button>      </span>    </el-dialog>  </div></template><script>  export default {    data() {      return {        tableData: [          {            date: '2016-05-02',            name: '王小虎',            address: '上海市普陀区金沙江路 1518 弄'          },          {            date: '2016-05-04',            name: '王小虎',            address: '上海市普陀区金沙江路 1517 弄'          },          {            date: '2016-05-01',            name: '王小虎',            address: '上海市普陀区金沙江路 1519 弄'          },          {            date: '2016-05-03',            name: '王小虎',            address: '上海市普陀区金沙江路 1516 弄'          }        ],        form: {          date: '',          name: '',          address: ''        },        showDialog: false      }    },    methods: {      handleEdit (index, row) {        this.showDialog = true        this.editIndex = index        this.form = row        this.$message({          message: '编辑成功',          type: 'success'        })      },      handleEditSave () {        this.showDialog = false      },      handleDelete (index, rows) {        this.$confirm('是否删除?', '提示', {          confirmButtonText: '确定',          cancelButtonText: '取消',          type: 'warning'        }).then(() => {          rows.splice(index, 1)          this.$message({            message: '删除成功',            type: 'success'          })        })      }    }  }</script>复制代码D2 Projects 简介团队主页：github.com/d2-projects
在最后，如果你看完了，并且觉得还不错，希望可以到团队主上给我们的项目点一个 star 作为你对我们的认可与支持，谢谢。



链接：https://juejin.im/post/5b8c97a751882542b526e2b3

奈斯