Merge tag 'crud_2.0' into develop

no message Former-commit-id: 82875c6830a9545e206ad8cca4832d47fd85d57f [formerly db03264a926d841a4667118b5c8d6f45a4da02ce] [formerly 82875c6830a9545e206ad8cca4832d47fd85d57f [formerly db03264a926d841a4667118b5c8d6f45a4da02ce] [formerly 82875c6830a9545e206ad8cca4832d47fd85d57f [formerly db03264a926d841a4667118b5c8d6f45a4da02ce] [formerly db03264a926d841a4667118b5c8d6f45a4da02ce [formerly 7729a38fdbc12fa77c696786958ed56a1bf717ab [formerly 09b621ddf293373effbb606ecefcc031732cbbb7]]]]] Former-commit-id: 3fc6598647fef6e4dafc296d7d01d73a6f07edb0 Former-commit-id: e343111a3dd1a1646f6c9cba9ff508d2b9d5a8bd Former-commit-id: b07eec247b8f2adcc2e1a01dd341fe82d63fa07a [formerly 49cffd23a8e1867d1d8fc2678c68153bae449504] Former-commit-id: ee641d0c9cec797cb2a274d7b42e4150e508dffa Former-commit-id: af33787caaa0708c21f2000a36e89ac241a6abb3 Former-commit-id: d1e4f47355ec4bebca0d8bd5d63654cec18c26e7 Former-commit-id: 88404fd775474bec411a88b7b760df6e75442cf3 Former-commit-id: e695ed2a6ea8595ee70ec2fbdb1d4bdc8f5c5b83
2018-12-27 14:48:21 +08:00 · 2018-12-27 14:48:21 +08:00 · 0ecc64d4c7
parent b17e393047 17d6a81496
commit 0ecc64d4c7
48 changed files with 837 additions and 298 deletions
--- a/package.json
+++ b/package.json
@ -13,7 +13,7 @@
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
-    "@d2-projects/d2-crud": "^1.3.4",
+    "@d2-projects/d2-crud": "^2.0.3",
    "@d2-projects/vue-filters-date": "^1.0.2",
    "@d2-projects/vue-table-export": "^1.0.1",
    "@d2-projects/vue-table-import": "^1.0.0",
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@ -40,7 +40,9 @@ export default {
        { path: `${pre}demo22`, title: '表单校验' },
        { path: `${pre}demo23`, title: '表格内编辑' },
        { path: `${pre}demo25`, title: '表格自定义组件' },
-        { path: `${pre}demo26`, title: '表单自定义组件' }
+        { path: `${pre}demo30`, title: '表单事件监听' },
+        { path: `${pre}demo26`, title: '表单自定义组件' },
+        { path: `${pre}demo31`, title: 'CRUD事件' }
      ]
    }
  ])('/demo/d2-crud/')
--- a/src/pages/demo/d2-crud/demo1/code.js
+++ b/src/pages/demo/d2-crud/demo1/code.js
@ -52,7 +52,7 @@ export default {
    }
  },
  mounted () {
-    console.log(this.$refs.d2Crud.d2Data)
+    console.log(this.$refs.d2Crud.d2CrudData)
  }
 }
 </script>`
--- a/src/pages/demo/d2-crud/demo1/doc.md
+++ b/src/pages/demo/d2-crud/demo1/doc.md
@ -1 +1 @@
-在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2Data` 拿到变化后的表格数据。代码如下：
+在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2CrudData` 拿到变化后的表格数据。代码如下：
--- a/src/pages/demo/d2-crud/demo1/index.vue
+++ b/src/pages/demo/d2-crud/demo1/index.vue
@ -68,7 +68,7 @@ export default {
    }
  },
  mounted () {
-    console.log(this.$refs.d2Crud.d2Data)
+    console.log(this.$refs.d2Crud.d2CrudData)
  }
 }
 </script>
--- a/src/pages/demo/d2-crud/demo16/code.js
+++ b/src/pages/demo/d2-crud/demo16/code.js
@ -1,15 +1,18 @@
 export default `<template>
  <div>
    <d2-crud
+      ref="d2Crud"
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
-      add-mode
-      :add-button="addButton"
+      add-title="我的新增"
      :form-template="formTemplate"
      :form-options="formOptions"
+      @dialog-open="handleDialogOpen"
      @row-add="handleRowAdd"
-      @dialog-cancel="handleDialogCancel"/>
+      @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">使用自定义模板新增</el-button>
+    </d2-crud>
  </div>
 </template>

@ -53,11 +56,7 @@ export default {
            address: '上海市普陀区金沙江路 1516 弄'
          }
      ],
-      addButton: {
-        icon: 'el-icon-plus',
-        size: 'small'
-      },
-      formTemplate: {
+      addTemplate: {
        date: {
          title: '日期',
          value: '2016-05-05'
@ -79,6 +78,38 @@ export default {
    }
  },
  methods: {
+    handleDialogOpen ({mode}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
+    // 普通的新增
+    addRow () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add'
+      })
+    },
+    // 传入自定义模板的新增
+    addRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add',
+        template: {
+          name: {
+            title: '姓名',
+            value: ''
+          },
+          value1: {
+            title: '新属性1',
+            value: ''
+          },
+          value2: {
+            title: '新属性2',
+            value: ''
+          }
+        }
+      })
+    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      setTimeout(() => {
@ -93,7 +124,7 @@ export default {
          address: '我是通过done事件传入的数据！'
        })
        this.formOptions.saveLoading = false
-      }, 300);
+      }, 300)
    },
    handleDialogCancel (done) {
      this.$message({
--- a/src/pages/demo/d2-crud/demo16/doc.md
+++ b/src/pages/demo/d2-crud/demo16/doc.md
@ -1 +1 @@
-通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增。代码如下：
+通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，定义 `add-title` 来修改新增模态框的标题，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
--- a/src/pages/demo/d2-crud/demo16/index.vue
+++ b/src/pages/demo/d2-crud/demo16/index.vue
@ -2,15 +2,17 @@
  <d2-container :filename="filename">
    <template slot="header">新增数据</template>
    <d2-crud
+      ref="d2Crud"
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
-      add-mode
-      :add-button="addButton"
-      :form-template="formTemplate"
+      add-title="我的新增"
+      :add-template="addTemplate"
      :form-options="formOptions"
+      @dialog-open="handleDialogOpen"
      @row-add="handleRowAdd"
      @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">使用自定义模板新增</el-button>
    </d2-crud>
    <el-card shadow="never" class="d2-mb">
      <d2-markdown :source="doc"/>
@ -70,11 +72,7 @@ export default {
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
-      addButton: {
-        icon: 'el-icon-plus',
-        size: 'small'
-      },
-      formTemplate: {
+      addTemplate: {
        date: {
          title: '日期',
          value: '2016-05-05'
@ -96,6 +94,36 @@ export default {
    }
  },
  methods: {
+    handleDialogOpen ({mode}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
+    addRow () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add'
+      })
+    },
+    addRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add',
+        template: {
+          name: {
+            title: '姓名',
+            value: ''
+          },
+          value1: {
+            title: '新属性1',
+            value: ''
+          },
+          value2: {
+            title: '新属性2',
+            value: ''
+          }
+        }
+      })
+    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      setTimeout(() => {
--- a/src/pages/demo/d2-crud/demo17/code.js
+++ b/src/pages/demo/d2-crud/demo17/code.js
@ -1,16 +1,18 @@
 export default `<template>
  <div>
    <d2-crud
+      ref="d2Crud"
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
-      add-mode
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      edit-title="我的修改"
+      :edit-template="editTemplate"
      :form-options="formOptions"
-      @row-add="handleRowAdd"
+      @dialog-open="handleDialogOpen"
      @row-edit="handleRowEdit"
-      @dialog-cancel="handleDialogCancel"/>
+      @dialog-cancel="handleDialogCancel">
+        <el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
+      </d2-crud>
  </div>
 </template>

@ -82,7 +84,7 @@ export default {
          }
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: ''
@ -118,17 +120,27 @@ export default {
    }
  },
  methods: {
-    handleRowAdd (row, done) {
-      this.formOptions.saveLoading = true
-      setTimeout(() => {
-        console.log(row)
-        this.$message({
-          message: '保存成功',
-          type: 'success'
-        })
-        done()
-        this.formOptions.saveLoading = false
-      }, 300)
+    handleDialogOpen ({mode, row}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
+    editRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: "edit",
+        rowIndex: 2,
+        template: {
+          date: {
+            title: '日期',
+            value: ''
+          },
+          name: {
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
    },
    handleRowEdit ({index, row}, done) {
      this.formOptions.saveLoading = true
--- a/src/pages/demo/d2-crud/demo17/doc.md
+++ b/src/pages/demo/d2-crud/demo17/doc.md
@ -1 +1 @@
-通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑。代码如下：
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `edit-template` 来为编辑添加模板，通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'edit'` 、`rowIndex` 属性和 `template`对象，可使用自定义模板编辑指定行，定义 `edit-title` 来修改编辑模态框的标题，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
--- a/src/pages/demo/d2-crud/demo17/index.vue
+++ b/src/pages/demo/d2-crud/demo17/index.vue
@ -2,16 +2,17 @@
  <d2-container :filename="filename">
    <template slot="header">修改数据</template>
    <d2-crud
+      ref="d2Crud"
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
-      add-mode
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      edit-title="我的修改"
+      :edit-template="editTemplate"
      :form-options="formOptions"
-      @row-add="handleRowAdd"
+      @dialog-open="handleDialogOpen"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
    </d2-crud>
    <el-card shadow="never" class="d2-mb">
      <d2-markdown :source="doc"/>
@ -99,7 +100,7 @@ export default {
          }
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: ''
@ -135,17 +136,27 @@ export default {
    }
  },
  methods: {
-    handleRowAdd (row, done) {
-      this.formOptions.saveLoading = true
-      setTimeout(() => {
-        console.log(row)
-        this.$message({
-          message: '保存成功',
-          type: 'success'
-        })
-        done()
-        this.formOptions.saveLoading = false
-      }, 300)
+    handleDialogOpen ({mode, row}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
+    editRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'edit',
+        rowIndex: 2,
+        template: {
+          date: {
+            title: '日期',
+            value: ''
+          },
+          name: {
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
    },
    handleRowEdit ({ index, row }, done) {
      this.formOptions.saveLoading = true
--- a/src/pages/demo/d2-crud/demo18/code.js
+++ b/src/pages/demo/d2-crud/demo18/code.js
@ -3,7 +3,6 @@ export default `<template>
    <d2-crud
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
      :rowHandle="rowHandle"
      @row-remove="handleRowRemove"/>
  </div>
--- a/src/pages/demo/d2-crud/demo18/index.vue
+++ b/src/pages/demo/d2-crud/demo18/index.vue
@ -4,7 +4,6 @@
    <d2-crud
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
      :rowHandle="rowHandle"
      @row-remove="handleRowRemove">
    </d2-crud>
--- a/src/pages/demo/d2-crud/demo19/code.js
+++ b/src/pages/demo/d2-crud/demo19/code.js
@ -3,7 +3,6 @@ export default `<template>
    <d2-crud
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
      :rowHandle="rowHandle"
      @custom-emit-1="handleCustomEvent"/>
  </div>
--- a/src/pages/demo/d2-crud/demo19/index.vue
+++ b/src/pages/demo/d2-crud/demo19/index.vue
@ -4,7 +4,6 @@
    <d2-crud
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
      :rowHandle="rowHandle"
      @custom-emit-1="handleCustomEvent">
    </d2-crud>
--- a/src/pages/demo/d2-crud/demo20/code.js
+++ b/src/pages/demo/d2-crud/demo20/code.js
@ -3,9 +3,8 @@ export default `<template>
    <d2-crud
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
      :form-options="formOptions"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel"/>
@ -60,7 +59,7 @@ export default {
          fixed: 'right'
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: '',
--- a/src/pages/demo/d2-crud/demo20/doc.md
+++ b/src/pages/demo/d2-crud/demo20/doc.md
@ -1 +1 @@
-向 `form-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收一个参数 `h`，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
+向 `add-template` 或 `edit-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收一个参数 `h`，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
--- a/src/pages/demo/d2-crud/demo20/index.vue
+++ b/src/pages/demo/d2-crud/demo20/index.vue
@ -4,9 +4,8 @@
    <d2-crud
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
      :form-options="formOptions"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel">
@ -77,7 +76,7 @@ export default {
          fixed: 'right'
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: '',
--- a/src/pages/demo/d2-crud/demo21/code.js
+++ b/src/pages/demo/d2-crud/demo21/code.js
@ -3,9 +3,8 @@ export default `<template>
    <d2-crud
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
      :form-options="formOptions"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel"/>
@ -60,7 +59,7 @@ export default {
          fixed: 'right'
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: '',
--- a/src/pages/demo/d2-crud/demo21/doc.md
+++ b/src/pages/demo/d2-crud/demo21/doc.md
@ -1 +1 @@
-向 `form-options` 中传入 `gutter` 属性来控制栅格间隔，向 `form-template` 的 `component` 对象传入 `span` 属性来控制栅格占据的列数。代码如下：
+向 `form-options` 中传入 `gutter` 属性来控制栅格间隔，向 `add-template` 或 `edit-template` 的 `component` 对象传入 `span` 属性来控制栅格占据的列数。代码如下：
--- a/src/pages/demo/d2-crud/demo21/index.vue
+++ b/src/pages/demo/d2-crud/demo21/index.vue
@ -4,9 +4,8 @@
    <d2-crud
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
      :form-options="formOptions"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel">
@ -77,7 +76,7 @@ export default {
          fixed: 'right'
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: '',
--- a/src/pages/demo/d2-crud/demo22/code.js
+++ b/src/pages/demo/d2-crud/demo22/code.js
@ -1,16 +1,16 @@
 export default `<template>
  <div>
    <d2-crud
+      ref="d2Crud"
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
-      add-mode
-      :add-button="addButton"
-      :form-template="formTemplate"
+      :add-template="addTemplate"
      :form-options="formOptions"
-      :form-rules="formRules"
+      :add-rules="addRules"
      @row-add="handleRowAdd"
-      @dialog-cancel="handleDialogCancel"/>
+      @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
+    </d2-crud>
  </div>
 </template>

@ -59,7 +59,7 @@ export default {
        icon: 'el-icon-plus',
        size: 'small'
      },
-      formTemplate: {
+      addTemplate: {
        date: {
          title: '日期',
          value: ''
@ -78,7 +78,7 @@ export default {
        labelPosition: 'left',
        saveLoading: false
      },
-      formRules: {
+      addRules: {
        date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
        name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
        address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
@ -86,6 +86,11 @@ export default {
    }
  },
  methods: {
+    addRow () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add'
+      })
+    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      setTimeout(() => {
--- a/src/pages/demo/d2-crud/demo22/doc.md
+++ b/src/pages/demo/d2-crud/demo22/doc.md
@ -1 +1 @@
-通过给 `D2 Crud` 传入 `form-rules` 可开启表单校验，校验规则参见：[async-validator](https://github.com/yiminghe/async-validator)。代码如下：
+通过给 `D2 Crud` 传入 `add-rules` 或 `edit-rules` 可开启新增/修改表单校验，校验规则参见：[async-validator](https://github.com/yiminghe/async-validator)。代码如下：
--- a/src/pages/demo/d2-crud/demo22/index.vue
+++ b/src/pages/demo/d2-crud/demo22/index.vue
@ -2,16 +2,15 @@
  <d2-container :filename="filename">
    <template slot="header">表单校验</template>
    <d2-crud
+      ref="d2Crud"
      :columns="columns"
      :data="data"
-      title="D2 CRUD"
-      add-mode
-      :add-button="addButton"
-      :form-template="formTemplate"
+      :add-template="addTemplate"
      :form-options="formOptions"
-      :form-rules="formRules"
+      :add-rules="addRules"
      @row-add="handleRowAdd"
      @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
    </d2-crud>
    <el-card shadow="never" class="d2-mb">
      <d2-markdown :source="doc"/>
@ -76,7 +75,7 @@ export default {
        icon: 'el-icon-plus',
        size: 'small'
      },
-      formTemplate: {
+      addTemplate: {
        date: {
          title: '日期',
          value: ''
@ -95,7 +94,7 @@ export default {
        labelPosition: 'left',
        saveLoading: false
      },
-      formRules: {
+      addRules: {
        date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
        name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
        address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
@ -103,6 +102,11 @@ export default {
    }
  },
  methods: {
+    addRow () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add'
+      })
+    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      setTimeout(() => {
--- a/src/pages/demo/d2-crud/demo23/code.js
+++ b/src/pages/demo/d2-crud/demo23/code.js
@ -2,7 +2,8 @@ export default `<template>
  <div>
    <d2-crud
      :columns="columns"
-      :data="data"/>
+      :data="data"
+      @cell-data-change="handleCellDataChange"/>
  </div>
 </template>

@ -73,6 +74,14 @@ export default {
        }
      ]
    }
+  },
+  methods: {
+    handleCellDataChange ({rowIndex, key, value, row}) {
+      console.log(rowIndex)
+      console.log(key)
+      console.log(value)
+      console.log(row)
+    }
  }
 }
 </script>`
--- a/src/pages/demo/d2-crud/demo23/doc.md
+++ b/src/pages/demo/d2-crud/demo23/doc.md
@ -1 +1 @@
-向 `columns` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收两个参数： `h`是render函数的固定参数， `scope` 是单元格中的数据，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
+向 `columns` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收两个参数： `h`是render函数的固定参数， `scope` 是单元格中的数据，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。通过 `cell-data-change`事件可以监听单元格内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 `{rowIndex, key, value, row}`， `rowIndex` 为改变所在行，`key` 为改变的字段，`value` 为改变后的值，`row` 是改变所在行的所有数据。代码如下：
--- a/src/pages/demo/d2-crud/demo23/index.vue
+++ b/src/pages/demo/d2-crud/demo23/index.vue
@ -3,7 +3,8 @@
    <template slot="header">表格内编辑</template>
    <d2-crud
      :columns="columns"
-      :data="data"/>
+      :data="data"
+      @cell-data-change="handleCellDataChange"/>
    <el-card shadow="never" class="d2-mb">
      <d2-markdown :source="doc"/>
    </el-card>
@ -89,6 +90,14 @@ export default {
        }
      ]
    }
+  },
+  methods: {
+    handleCellDataChange ({rowIndex, key, value, row}) {
+      console.log(rowIndex)
+      console.log(key)
+      console.log(value)
+      console.log(row)
+    }
  }
 }
 </script>
--- a/src/pages/demo/d2-crud/demo24/code.js
+++ b/src/pages/demo/d2-crud/demo24/code.js
@ -1,12 +1,16 @@
 export default `<template>
  <div>
-  <d2-crud
-    ref="d2Crud"
-    :columns="columns"
-    :data="data">
-    <el-button slot="headerButton">自定义按钮1</el-button>
-    <el-button slot="headerButton" type="primary" round>自定义按钮2</el-button>
-  </d2-crud>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data">
+      <el-input slot="header" placeholder="请输入内容" style="margin-bottom: 5px">
+        <template slot="prepend">Http://</template>
+        <template slot="append">.com</template>
+      </el-input>
+      <el-button slot="header" style="margin-bottom: 5px">自定义按钮1</el-button>
+      <el-button slot="header" type="primary" round style="margin-bottom: 5px">自定义按钮2</el-button>
+    </d2-crud>
  </div>
 </template>

@ -53,9 +57,6 @@ export default {
        }
      ]
    }
-  },
-  mounted () {
-    console.log(this.$refs.d2Crud.d2Data)
  }
 }
 </script>`
--- a/src/pages/demo/d2-crud/demo24/doc.md
+++ b/src/pages/demo/d2-crud/demo24/doc.md
@ -1 +1 @@
-`headerButton` slot 可以在表头添加自定义按钮。代码如下：
+`header` slot 可以在表头添加自定义内容。代码如下：
--- a/src/pages/demo/d2-crud/demo24/index.vue
+++ b/src/pages/demo/d2-crud/demo24/index.vue
@ -1,12 +1,13 @@
 <template>
  <d2-container :filename="filename">
    <template slot="header">表格slot</template>
-    <d2-crud
-      ref="d2Crud"
-      :columns="columns"
-      :data="data">
-      <el-button slot="headerButton">自定义按钮1</el-button>
-      <el-button slot="headerButton" type="primary" round>自定义按钮2</el-button>
+    <d2-crud ref="d2Crud" :columns="columns" :data="data">
+      <el-input slot="header" placeholder="请输入内容" style="margin-bottom: 5px">
+        <template slot="prepend">Http://</template>
+        <template slot="append">.com</template>
+      </el-input>
+      <el-button slot="header" style="margin-bottom: 5px">自定义按钮1</el-button>
+      <el-button slot="header" type="primary" round style="margin-bottom: 5px">自定义按钮2</el-button>
    </d2-crud>
    <el-card shadow="never" class="d2-mb">
      <d2-markdown :source="doc"/>
@ -69,9 +70,6 @@ export default {
        }
      ]
    }
-  },
-  mounted () {
-    console.log(this.$refs.d2Crud.d2Data)
  }
 }
 </script>
--- a/src/pages/demo/d2-crud/demo25/MyTag.vue
+++ b/src/pages/demo/d2-crud/demo25/MyTag.vue
@ -25,6 +25,8 @@ export default {
    text () {
      if (this.scope.$index === 1) {
        return this.myProps
+      } else if (this.scope.$index === 3) {
+        return '通过scope拿到了当前行日期：' + this.scope.row.date
      }
      return this.value ? '是' : '否'
    }
--- a/src/pages/demo/d2-crud/demo25/codeComponent.js
+++ b/src/pages/demo/d2-crud/demo25/codeComponent.js
@ -29,6 +29,8 @@ export default {
    text () {
      if (this.scope.$index === 1) {
        return this.myProps
+      } else if (this.scope.$index === 3) {
+        return '通过scope拿到了当前行日期：' + this.scope.row.date
      }
      return this.value ? '是' : '否'
    }
--- a/src/pages/demo/d2-crud/demo26/codeOverall.js
+++ b/src/pages/demo/d2-crud/demo26/codeOverall.js
@ -5,7 +5,7 @@ export default `<template>
      :columns="columns"
      :data="data"
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
      @d2-data-change="handleDataChange"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel"/>
@ -73,7 +73,7 @@ export default {
          size: 'small'
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: ''
--- a/src/pages/demo/d2-crud/demo26/codePart.js
+++ b/src/pages/demo/d2-crud/demo26/codePart.js
@ -5,7 +5,7 @@ export default `<template>
      :columns="columns"
      :data="data"
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
      @d2-data-change="handleDataChange"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel"/>
@ -78,7 +78,7 @@ export default {
          size: 'small'
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: ''
--- a/src/pages/demo/d2-crud/demo26/doc.md
+++ b/src/pages/demo/d2-crud/demo26/doc.md
@ -1 +1 @@
-向 `formTemplate` 中需要渲染自定义组件的 `component` 对象 `name` 中传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，代码如下：
+向 `addTemplate` 或 `editTemplate` 中需要渲染自定义组件的 `component` 对象 `name` 中传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，代码如下：
--- a/src/pages/demo/d2-crud/demo26/index.vue
+++ b/src/pages/demo/d2-crud/demo26/index.vue
@ -6,7 +6,7 @@
      :columns="columns"
      :data="data"
      :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
      @d2-data-change="handleDataChange"
      @row-edit="handleRowEdit"
      @dialog-cancel="handleDialogCancel"/>
@ -106,7 +106,7 @@ export default {
          size: 'small'
        }
      },
-      formTemplate: {
+      editTemplate: {
        date: {
          title: '日期',
          value: ''
--- a/src/pages/demo/d2-crud/demo29/code.js
+++ b/src/pages/demo/d2-crud/demo29/code.js
@ -1,113 +1,73 @@
 export default `<template>
  <div>
-  <d2-crud
-    :columns="columns"
-    :data="data"
-    :pagination="pagination"/>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :loading="loading"
+      :pagination="pagination"
+      @pagination-current-change="paginationCurrentChange"/>
  </div>
 </template>

 <script>
+import { BusinessTable1List } from '@api/demo.business.table.1'
+
 export default {
  data () {
    return {
      columns: [
        {
-          title: 'ID',
-          key: 'id'
+          title: '卡密',
+          key: 'key',
+          width: 320
        },
        {
-          title: '日期',
-          key: 'date'
+          title: '面值',
+          key: 'value'
        },
        {
-          title: '姓名',
-          key: 'name'
+          title: '管理员',
+          key: 'admin'
        },
        {
-          title: '地址',
-          key: 'address'
-        }
-      ],
-      data: [
-        {
-          id: 1,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          id: 2,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        },
-        {
-          id: 3,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        },
-        {
-          id: 4,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        },
-        {
-          id: 5,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          id: 6,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        },
-        {
-          id: 7,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        },
-        {
-          id: 8,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        },
-        {
-          id: 9,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          id: 10,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        },
-        {
-          id: 11,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        },
-        {
-          id: 12,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
+          title: '创建时间',
+          key: 'dateTimeCreat'
+        },
+        {
+          title: '使用时间',
+          key: 'dateTimeUse'
        }
      ],
+      data: [],
+      loading: false,
      pagination: {
+        currentPage: 1,
        pageSize: 5,
-        layout: 'prev, pager, next, total'
+        total: 0
      }
    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    paginationCurrentChange (currentPage) {
+      this.pagination.currentPage = currentPage
+      this.fetchData()
+    },
+    fetchData () {
+      this.loading = true
+      BusinessTable1List({
+        ...this.pagination
+      }).then(res => {
+        this.data = res.list
+        this.pagination.total = res.page.total
+        this.loading = false
+      }).catch(err => {
+        console.log('err', err)
+        this.loading = false
+      })
+    }
  }
 }
 </script>`
--- a/src/pages/demo/d2-crud/demo29/index.vue
+++ b/src/pages/demo/d2-crud/demo29/index.vue
@ -4,7 +4,9 @@
    <d2-crud
      :columns="columns"
      :data="data"
-      :pagination="pagination"/>
+      :loading="loading"
+      :pagination="pagination"
+      @pagination-current-change="paginationCurrentChange"/>
    <el-card shadow="never" class="d2-mb">
      <d2-markdown :source="doc"/>
    </el-card>
@ -20,6 +22,7 @@
 <script>
 import doc from './doc.md'
 import code from './code.js'
+import { BusinessTable1List } from '@api/demo.business.table.1'

 export default {
  data () {
@ -29,101 +32,57 @@ export default {
      code,
      columns: [
        {
-          title: 'ID',
-          key: 'id'
+          title: '卡密',
+          key: 'key',
+          width: 320
        },
        {
-          title: '日期',
-          key: 'date'
+          title: '面值',
+          key: 'value'
        },
        {
-          title: '姓名',
-          key: 'name'
+          title: '管理员',
+          key: 'admin'
        },
        {
-          title: '地址',
-          key: 'address'
-        }
-      ],
-      data: [
-        {
-          id: 1,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          id: 2,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        },
-        {
-          id: 3,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        },
-        {
-          id: 4,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        },
-        {
-          id: 5,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          id: 6,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        },
-        {
-          id: 7,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        },
-        {
-          id: 8,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        },
-        {
-          id: 9,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          id: 10,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        },
-        {
-          id: 11,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        },
-        {
-          id: 12,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
+          title: '创建时间',
+          key: 'dateTimeCreat'
+        },
+        {
+          title: '使用时间',
+          key: 'dateTimeUse'
        }
      ],
+      data: [],
+      loading: false,
      pagination: {
+        currentPage: 1,
        pageSize: 5,
-        layout: 'prev, pager, next, total'
+        total: 0
      }
    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    paginationCurrentChange (currentPage) {
+      this.pagination.currentPage = currentPage
+      this.fetchData()
+    },
+    fetchData () {
+      this.loading = true
+      BusinessTable1List({
+        ...this.pagination
+      }).then(res => {
+        this.data = res.list
+        this.pagination.total = res.page.total
+        this.loading = false
+      }).catch(err => {
+        console.log('err', err)
+        this.loading = false
+      })
+    }
  }
 }
 </script>
--- a/src/pages/demo/d2-crud/demo30/code.js
+++ b/src/pages/demo/d2-crud/demo30/code.js
@ -0,0 +1,134 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      :rowHandle="rowHandle"
+      :edit-template="editTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"
+      @form-data-change="handleFormDataChange"/>
+  </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 弄',
+          forbidEdit: true,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidEdit: false,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidEdit: false,
+          showEditButton: false
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidEdit: false,
+          showEditButton: true
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small'
+        }
+      },
+      editTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        },
+        forbidEdit: {
+          title: '禁用按钮',
+          value: false,
+          component: {
+            show: false
+          }
+        },
+        showEditButton: {
+          title: '显示按钮',
+          value: true,
+          component: {
+            show: false
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleFormDataChange ({key, value}) {
+      console.log(key)
+      console.log(value)
+    },
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo30/doc.md
+++ b/src/pages/demo/d2-crud/demo30/doc.md
@ -0,0 +1 @@
+通过 `form-data-change` 事件可以监听表单内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 {key, value}，`key` 为改变的字段，`value` 为改变后的值。代码如下：
--- a/src/pages/demo/d2-crud/demo30/index.vue
+++ b/src/pages/demo/d2-crud/demo30/index.vue
@ -0,0 +1,150 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">表单事件监听</template>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      :rowHandle="rowHandle"
+      :edit-template="editTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"
+      @form-data-change="handleFormDataChange"/>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      filename: __filename,
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          forbidEdit: true,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidEdit: false,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidEdit: false,
+          showEditButton: false
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidEdit: false,
+          showEditButton: true
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small'
+        }
+      },
+      editTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        },
+        forbidEdit: {
+          title: '禁用按钮',
+          value: false,
+          component: {
+            show: false
+          }
+        },
+        showEditButton: {
+          title: '显示按钮',
+          value: true,
+          component: {
+            show: false
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleFormDataChange ({key, value}) {
+      console.log(key)
+      console.log(value)
+    },
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo31/code.js
+++ b/src/pages/demo/d2-crud/demo31/code.js
@ -0,0 +1,88 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data">
+      <el-button slot="header" style="margin-bottom: 5px" @click="updateCell">更新第二行日期</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="updateRow">更新第三行所有数据</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增一行</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="removeRow">删除最后一行</el-button>
+    </d2-crud>
+  </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 弄',
+          forbidEdit: true,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidEdit: false,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidEdit: false,
+          showEditButton: false
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidEdit: false,
+          showEditButton: true
+        }
+      ]
+    }
+  },
+  methods: {
+    updateCell () {
+      this.$refs.d2Crud.updateCell(1, 'date', '2018-01-01')
+    },
+    updateRow () {
+      this.$refs.d2Crud.updateRow(2, {
+        date: '2018-01-01',
+        name: '王小小',
+        address: '上海市普陀区金沙江路 2333 弄'
+      })
+    },
+    addRow () {
+      this.$refs.d2Crud.addRow({
+        date: '2018-01-01',
+        name: '王小二',
+        address: '上海市普陀区金沙江路 7777 弄'
+      })
+    },
+    removeRow () {
+      this.$refs.d2Crud.removeRow(this.$refs.d2Crud.d2CrudData.length - 1)
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo31/doc.md
+++ b/src/pages/demo/d2-crud/demo31/doc.md
@ -0,0 +1,15 @@
+`D2 Crud` 向外部暴露了一些方法，除了之前介绍过的 `showDialog` 和 `closeDialog` 方法，还有以下几个常用方法：
+- updateCell
+  * 更新单元格
+  * 参数：rowIndex, key, value
+- updateRow
+  * 更新行
+  * 参数：index, row
+- addRow
+  * 新增一行
+  * 参数：row
+- removeRow
+  * 删除一行
+  * 参数：index   
+
+代码如下：
--- a/src/pages/demo/d2-crud/demo31/index.vue
+++ b/src/pages/demo/d2-crud/demo31/index.vue
@ -0,0 +1,104 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">CRUD事件</template>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data">
+      <el-button slot="header" style="margin-bottom: 5px" @click="updateCell">更新第二行日期</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="updateRow">更新第三行所有数据</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增一行</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="removeRow">删除最后一行</el-button>
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      filename: __filename,
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          forbidEdit: true,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidEdit: false,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidEdit: false,
+          showEditButton: false
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidEdit: false,
+          showEditButton: true
+        }
+      ]
+    }
+  },
+  methods: {
+    updateCell () {
+      this.$refs.d2Crud.updateCell(1, 'date', '2018-01-01')
+    },
+    updateRow () {
+      this.$refs.d2Crud.updateRow(2, {
+        date: '2018-01-01',
+        name: '王小小',
+        address: '上海市普陀区金沙江路 2333 弄'
+      })
+    },
+    addRow () {
+      this.$refs.d2Crud.addRow({
+        date: '2018-01-01',
+        name: '王小二',
+        address: '上海市普陀区金沙江路 7777 弄'
+      })
+    },
+    removeRow () {
+      this.$refs.d2Crud.removeRow(this.$refs.d2Crud.d2CrudData.length - 1)
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo7/code.js
+++ b/src/pages/demo/d2-crud/demo7/code.js
@ -4,7 +4,8 @@ export default `<template>
      :columns="columns"
      :data="data"
      :options="options"
-      :rowHandle="rowHandle"/>
+      :rowHandle="rowHandle"
+      @row-remove="handleRowRemove"/>
  </div>
 </template>

@ -107,6 +108,15 @@ export default {
        }
      }
    }
+  },
+  methods: {
+    handleRowRemove ({index, row}, done) {
+      this.$message({
+        message: '删除成功',
+        type: 'success'
+      })
+      done()
+    }
  }
 }
 </script>`
--- a/src/pages/demo/d2-crud/demo7/index.vue
+++ b/src/pages/demo/d2-crud/demo7/index.vue
@ -5,7 +5,8 @@
      :columns="columns"
      :data="data"
      :options="options"
-      :rowHandle="rowHandle"/>
+      :rowHandle="rowHandle"
+      @row-remove="handleRowRemove"/>
    <el-card shadow="never" class="d2-mb">
      <d2-markdown :source="doc"/>
    </el-card>
@ -123,6 +124,15 @@ export default {
        }
      }
    }
+  },
+  methods: {
+    handleRowRemove ({index, row}, done) {
+      this.$message({
+        message: '删除成功',
+        type: 'success'
+      })
+      done()
+    }
  }
 }
 </script>
--- a/src/router/modules/d2-crud.js
+++ b/src/router/modules/d2-crud.js
@ -38,6 +38,8 @@ export default {
    { path: 'demo26', name: `${pre}demo26`, component: () => import('@/pages/demo/d2-crud/demo26'), meta: { ...meta, title: '表单自定义组件' } },
    { path: 'demo27', name: `${pre}demo27`, component: () => import('@/pages/demo/d2-crud/demo27'), meta: { ...meta, title: '加载状态' } },
    { path: 'demo28', name: `${pre}demo28`, component: () => import('@/pages/demo/d2-crud/demo28'), meta: { ...meta, title: '自定义加载状态' } },
-    { path: 'demo29', name: `${pre}demo29`, component: () => import('@/pages/demo/d2-crud/demo29'), meta: { ...meta, title: '分页' } }
+    { path: 'demo29', name: `${pre}demo29`, component: () => import('@/pages/demo/d2-crud/demo29'), meta: { ...meta, title: '分页' } },
+    { path: 'demo30', name: `${pre}demo30`, component: () => import('@/pages/demo/d2-crud/demo30'), meta: { ...meta, title: '表单事件监听' } },
+    { path: 'demo31', name: `${pre}demo31`, component: () => import('@/pages/demo/d2-crud/demo31'), meta: { ...meta, title: 'CRUD事件' } }
  ])('demo-d2-crud-')
 }
--- a/yarn.lock.REMOVED.git-id
+++ b/yarn.lock.REMOVED.git-id
@ -1 +1 @@
-0e17bb1ba0029ca76043e344c175a81df34fcb2c
+f087314ad07f2b4d7658559be7838c8dd75bf499
				`@ -0,0 +1 @@`
				通过 `form-data-change` 事件可以监听表单内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 {key, value}，`key` 为改变的字段，`value` 为改变后的值。代码如下：