diff --git a/src/pages/demo/d2-crud/demo17/code.js b/src/pages/demo/d2-crud/demo17/code.js
index 3d0f9a66..b27b1881 100644
--- a/src/pages/demo/d2-crud/demo17/code.js
+++ b/src/pages/demo/d2-crud/demo17/code.js
@@ -1,16 +1,16 @@
 export default `<template>
   <div>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
-      add-mode
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
-      @row-add="handleRowAdd"
       @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 +82,7 @@ export default {
           }
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: ''
@@ -118,17 +118,21 @@ 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)
+    editRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: "edit",
+        rowIndex: 2,
+        template: {
+          date: {
+            title: '日期',
+            value: ''
+          },
+          name: {
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
     },
     handleRowEdit ({index, row}, done) {
       this.formOptions.saveLoading = true
diff --git a/src/pages/demo/d2-crud/demo17/doc.md b/src/pages/demo/d2-crud/demo17/doc.md
index de4b3925..5943668f 100644
--- 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`对象，可使用自定义模板编辑指定行，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑。代码如下：
diff --git a/src/pages/demo/d2-crud/demo17/index.vue b/src/pages/demo/d2-crud/demo17/index.vue
index cd6b0d40..66fb32a8 100644
--- a/src/pages/demo/d2-crud/demo17/index.vue
+++ b/src/pages/demo/d2-crud/demo17/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
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
-      @row-add="handleRowAdd"
       @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 +98,7 @@ export default {
           }
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: ''
@@ -135,17 +134,21 @@ 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)
+    editRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: "edit",
+        rowIndex: 2,
+        template: {
+          date: {
+            title: '日期',
+            value: ''
+          },
+          name: {
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
     },
     handleRowEdit ({ index, row }, done) {
       this.formOptions.saveLoading = true
diff --git a/src/pages/demo/d2-crud/demo18/code.js b/src/pages/demo/d2-crud/demo18/code.js
index 5484cf37..6c92d4eb 100644
--- 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>
diff --git a/src/pages/demo/d2-crud/demo18/index.vue b/src/pages/demo/d2-crud/demo18/index.vue
index 6e0f4399..762e663f 100644
--- 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>
diff --git a/src/pages/demo/d2-crud/demo19/code.js b/src/pages/demo/d2-crud/demo19/code.js
index 086bcfb9..4971a6d9 100644
--- 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>
diff --git a/src/pages/demo/d2-crud/demo19/index.vue b/src/pages/demo/d2-crud/demo19/index.vue
index 0d950431..21e76415 100644
--- 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>
diff --git a/src/pages/demo/d2-crud/demo20/code.js b/src/pages/demo/d2-crud/demo20/code.js
index 022eafc2..b29ea6d5 100644
--- a/src/pages/demo/d2-crud/demo20/code.js
+++ b/src/pages/demo/d2-crud/demo20/code.js
@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       :form-template="formTemplate"
       :form-options="formOptions"
diff --git a/src/pages/demo/d2-crud/demo20/index.vue b/src/pages/demo/d2-crud/demo20/index.vue
index 081da3a3..d2de7952 100644
--- a/src/pages/demo/d2-crud/demo20/index.vue
+++ b/src/pages/demo/d2-crud/demo20/index.vue
@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       :form-template="formTemplate"
       :form-options="formOptions"
diff --git a/src/pages/demo/d2-crud/demo21/code.js b/src/pages/demo/d2-crud/demo21/code.js
index f61c65e1..3eca134b 100644
--- a/src/pages/demo/d2-crud/demo21/code.js
+++ b/src/pages/demo/d2-crud/demo21/code.js
@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       :form-template="formTemplate"
       :form-options="formOptions"
diff --git a/src/pages/demo/d2-crud/demo21/index.vue b/src/pages/demo/d2-crud/demo21/index.vue
index 8713426d..89dedd95 100644
--- a/src/pages/demo/d2-crud/demo21/index.vue
+++ b/src/pages/demo/d2-crud/demo21/index.vue
@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       :form-template="formTemplate"
       :form-options="formOptions"
diff --git a/src/pages/demo/d2-crud/demo22/code.js b/src/pages/demo/d2-crud/demo22/code.js
index 30756630..30eb26de 100644
--- a/src/pages/demo/d2-crud/demo22/code.js
+++ b/src/pages/demo/d2-crud/demo22/code.js
@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       add-mode
       :add-button="addButton"
       :form-template="formTemplate"
diff --git a/src/pages/demo/d2-crud/demo22/index.vue b/src/pages/demo/d2-crud/demo22/index.vue
index 5d4bdfd0..224f2995 100644
--- a/src/pages/demo/d2-crud/demo22/index.vue
+++ b/src/pages/demo/d2-crud/demo22/index.vue
@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       add-mode
       :add-button="addButton"
       :form-template="formTemplate"