From d610c352625b63c51e636808b4feebd73143ee5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 09:51:27 +0800
Subject: [PATCH 01/19] init demo1

Former-commit-id: f80b1ffa04c4751cead80e90bbd9c1f4c1913789 [formerly f80b1ffa04c4751cead80e90bbd9c1f4c1913789 [formerly f80b1ffa04c4751cead80e90bbd9c1f4c1913789 [formerly f80b1ffa04c4751cead80e90bbd9c1f4c1913789 [formerly ac4e7821263c3bd7c874569517388af4336e6e02 [formerly 368b28148e276e17fb81532baea45d077c13bfca]]]]]
Former-commit-id: 5e0c1145b8a73f32312ab66125d37b46e89731fd
Former-commit-id: afcd92f2b5a716041bef3393125840d420551fca
Former-commit-id: aa8dad016833b0677122c47d58a3ae8a03292533 [formerly c8787d06a19140118d009820a7c6066b709a0328]
Former-commit-id: bae416d70d1980e9a110c9321ea0d8ce46aeb64d
Former-commit-id: c6188c15cb3deba6637e90ee93cd1551e6e2c7e9
Former-commit-id: 05623268f102305054f13a7a2b8d16490eb03a3d
Former-commit-id: 0ca56fade666745a0ceb84930a3dd128fa62ec91
Former-commit-id: b6e5fb9fa02b998a87c34818d5ff2b3ce2393345
---
 package.json                           | 2 +-
 src/pages/demo/d2-crud/demo1/code.js   | 2 +-
 src/pages/demo/d2-crud/demo1/doc.md    | 2 +-
 src/pages/demo/d2-crud/demo1/index.vue | 2 +-
 yarn.lock.REMOVED.git-id               | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index c9dd3eb0..f610ced7 100644
--- 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.0",
     "@d2-projects/vue-filters-date": "^1.0.2",
     "@d2-projects/vue-table-export": "^1.0.1",
     "@d2-projects/vue-table-import": "^1.0.0",
diff --git a/src/pages/demo/d2-crud/demo1/code.js b/src/pages/demo/d2-crud/demo1/code.js
index 8a087f4d..e7a5d9de 100644
--- 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>`
diff --git a/src/pages/demo/d2-crud/demo1/doc.md b/src/pages/demo/d2-crud/demo1/doc.md
index e09a2f74..fc11dfbc 100644
--- 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` 拿到变化后的表格数据。代码如下：
diff --git a/src/pages/demo/d2-crud/demo1/index.vue b/src/pages/demo/d2-crud/demo1/index.vue
index c2fd092c..ce2d0e6d 100644
--- 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>
diff --git a/yarn.lock.REMOVED.git-id b/yarn.lock.REMOVED.git-id
index 926afb0b..755e2e0e 100644
--- a/yarn.lock.REMOVED.git-id
+++ b/yarn.lock.REMOVED.git-id
@@ -1 +1 @@
-0e17bb1ba0029ca76043e344c175a81df34fcb2c
\ No newline at end of file
+0112dcaa59d17f79454b15cb17a0dc1116fdeb13
\ No newline at end of file

From 46ad024bdfaa7c97c677fa63d99c5e4cc7c1bc6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 10:04:54 +0800
Subject: [PATCH 02/19] demo7

Former-commit-id: f4beefe1f777778b9d3271748e997476b37b335d [formerly f4beefe1f777778b9d3271748e997476b37b335d [formerly f4beefe1f777778b9d3271748e997476b37b335d [formerly f4beefe1f777778b9d3271748e997476b37b335d [formerly 615eb77a50556807780cc416ab14dcad1b773c8f [formerly f4c208f5d043f1dba590a5050e7cbc52e37c4c82]]]]]
Former-commit-id: 51207b22705c09fb6e9ddbf5759ea6cb03e86253
Former-commit-id: c16927ecbc2bb823e8b5686177e3c63cc89f8d18
Former-commit-id: 927289c443ca4baefd4bf022cc964152a4468c10 [formerly 4fb498623fe0979195368082b9fc428ccff6ca91]
Former-commit-id: 349c706eec638ee588c0403385c1cefd77b90bd3
Former-commit-id: e89ed866096a2efe9e8117bb202f3f973c91fc40
Former-commit-id: 9f977d211be26a3d2852abeeba3ce3cf5255419f
Former-commit-id: 23e8336f4caac10d7d46d1168fa396123a71b27b
Former-commit-id: db1799cd572609ca4e744c3f8b2a77865c83832b
---
 src/pages/demo/d2-crud/demo7/code.js   | 12 +++++++++++-
 src/pages/demo/d2-crud/demo7/index.vue | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo7/code.js b/src/pages/demo/d2-crud/demo7/code.js
index cb4d4e2c..ea10043f 100644
--- 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>`
diff --git a/src/pages/demo/d2-crud/demo7/index.vue b/src/pages/demo/d2-crud/demo7/index.vue
index 3063782d..b4516957 100644
--- 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>

From 365a79f813a3044f0c6a4351e821d93f33d09581 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 10:20:23 +0800
Subject: [PATCH 03/19] demo24

Former-commit-id: 9c27f9a31685f7f2bbac6753223d3cba80df5137 [formerly 9c27f9a31685f7f2bbac6753223d3cba80df5137 [formerly 9c27f9a31685f7f2bbac6753223d3cba80df5137 [formerly 9c27f9a31685f7f2bbac6753223d3cba80df5137 [formerly d1a4eeaf471e7dde786603eb5feba15d2d3a273f [formerly c07b0a08a3c2fa248ca6ff7568d45015db2d3147]]]]]
Former-commit-id: f196405033174efe983252ad2f0aced44428e859
Former-commit-id: affb0b740a6120516a0207a592675b2c26607472
Former-commit-id: b6ad9a07ba29066dcc3cad28814a1b23c05d1d10 [formerly c7d64ee76aab116775b1f19540d6d67782886669]
Former-commit-id: 429004729676144772d6abf85e1bb94f83877de3
Former-commit-id: 4bd505129cfb36ff4576aeeb246bd8b6b6340dcb
Former-commit-id: 877886e90cc33ae1dedd23580f3ca6ffe698ad84
Former-commit-id: f1964760a2efe6edf0de208d07808e429b8d6d9c
Former-commit-id: f55839b8058fbbe298e36c69936c88645fe4be0e
---
 src/pages/demo/d2-crud/demo24/code.js   | 21 ++++----
 src/pages/demo/d2-crud/demo24/doc.md    |  2 +-
 src/pages/demo/d2-crud/demo24/index.vue | 66 ++++++++++++-------------
 3 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo24/code.js b/src/pages/demo/d2-crud/demo24/code.js
index 2516e5b1..8e09fc90 100644
--- 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>`
diff --git a/src/pages/demo/d2-crud/demo24/doc.md b/src/pages/demo/d2-crud/demo24/doc.md
index fd68e284..913162f0 100644
--- a/src/pages/demo/d2-crud/demo24/doc.md
+++ b/src/pages/demo/d2-crud/demo24/doc.md
@@ -1 +1 @@
-`headerButton` slot 可以在表头添加自定义按钮。代码如下：
+`header` slot 可以在表头添加自定义内容。代码如下：
diff --git a/src/pages/demo/d2-crud/demo24/index.vue b/src/pages/demo/d2-crud/demo24/index.vue
index 79918a28..30d2ec28 100644
--- 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"/>
@@ -21,57 +22,54 @@
 </template>
 
 <script>
-import doc from './doc.md'
-import code from './code.js'
+import doc from "./doc.md";
+import code from "./code.js";
 
 export default {
-  data () {
+  data() {
     return {
       filename: __filename,
       doc,
       code,
       columns: [
         {
-          title: '日期',
-          key: 'date',
-          width: '180'
+          title: "日期",
+          key: "date",
+          width: "180"
         },
         {
-          title: '姓名',
-          key: 'name',
-          width: '180'
+          title: "姓名",
+          key: "name",
+          width: "180"
         },
         {
-          title: '地址',
-          key: 'address'
+          title: "地址",
+          key: "address"
         }
       ],
       data: [
         {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄"
         },
         {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄"
         },
         {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄"
         },
         {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄"
         }
       ]
-    }
-  },
-  mounted () {
-    console.log(this.$refs.d2Crud.d2Data)
+    };
   }
-}
+};
 </script>

From 3188b0c740e0bdecdf5824e059f7679eea290838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 11:18:55 +0800
Subject: [PATCH 04/19] demo29

Former-commit-id: a9f8bbdf8b4b9f2075e005dc9a03b1171da75855 [formerly a9f8bbdf8b4b9f2075e005dc9a03b1171da75855 [formerly a9f8bbdf8b4b9f2075e005dc9a03b1171da75855 [formerly a9f8bbdf8b4b9f2075e005dc9a03b1171da75855 [formerly b3bdc87a2f18e53072592fa312e07a2ec04e719a [formerly 684b4bc4b2918167745c6f055dec0d7ccdcc4bf3]]]]]
Former-commit-id: dc666ca9fa04a27c129b44ec33fb8fc423db0f15
Former-commit-id: e6d2525875d3343098fdafb1bb9c82ed88243753
Former-commit-id: d025e35937306d24ce8e699df81d5b3b1adbe238 [formerly a22591c2cedc03954f656ab4388738b1c5037304]
Former-commit-id: d0c4aa7a71bc61439aac3dd0d10f1543678790bb
Former-commit-id: 7e1b884f39e9f0f6e364a89ec4b1840792e18fb2
Former-commit-id: bcedb771d6808168e3746eada50483b1d9c9c765
Former-commit-id: 9d76d6a9de76e409e1f34efbd1451a9291840eec
Former-commit-id: 7f6a2103013a57c5e79d8f533fff95c39e8ca7f1
---
 src/pages/demo/d2-crud/demo24/index.vue |  50 ++++-----
 src/pages/demo/d2-crud/demo29/code.js   | 134 +++++++++---------------
 src/pages/demo/d2-crud/demo29/index.vue | 127 ++++++++--------------
 3 files changed, 115 insertions(+), 196 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo24/index.vue b/src/pages/demo/d2-crud/demo24/index.vue
index 30d2ec28..051eab05 100644
--- a/src/pages/demo/d2-crud/demo24/index.vue
+++ b/src/pages/demo/d2-crud/demo24/index.vue
@@ -22,54 +22,54 @@
 </template>
 
 <script>
-import doc from "./doc.md";
-import code from "./code.js";
+import doc from './doc.md'
+import code from './code.js'
 
 export default {
-  data() {
+  data () {
     return {
       filename: __filename,
       doc,
       code,
       columns: [
         {
-          title: "日期",
-          key: "date",
-          width: "180"
+          title: '日期',
+          key: 'date',
+          width: '180'
         },
         {
-          title: "姓名",
-          key: "name",
-          width: "180"
+          title: '姓名',
+          key: 'name',
+          width: '180'
         },
         {
-          title: "地址",
-          key: "address"
+          title: '地址',
+          key: 'address'
         }
       ],
       data: [
         {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄"
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
         },
         {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄"
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
         },
         {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄"
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
         },
         {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄"
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
         }
       ]
-    };
+    }
   }
-};
+}
 </script>
diff --git a/src/pages/demo/d2-crud/demo29/code.js b/src/pages/demo/d2-crud/demo29/code.js
index a8a10b8d..3f4e3450 100644
--- 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 = falser
+      })
+    }
   }
 }
 </script>`
diff --git a/src/pages/demo/d2-crud/demo29/index.vue b/src/pages/demo/d2-crud/demo29/index.vue
index 5d48fba8..525b4982 100644
--- 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 = falser
+      })
+    }
   }
 }
 </script>

From 52d3c46da2831b8b6da73c9c275f3006c084ae3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 14:03:12 +0800
Subject: [PATCH 05/19] demo16

Former-commit-id: db05786be3e9ab66abe0b3b604d01562542cfacc [formerly db05786be3e9ab66abe0b3b604d01562542cfacc [formerly db05786be3e9ab66abe0b3b604d01562542cfacc [formerly db05786be3e9ab66abe0b3b604d01562542cfacc [formerly 2acd0640d624075a9ddc5f9a86ee5adec2b88bc0 [formerly f87fab303d38481b3aa9a8dfda9f727d4bc25904]]]]]
Former-commit-id: 7030151b1f70b55f37114edc200cf3552469d190
Former-commit-id: 1b25ebdf8718b92e2b76e2d20fc75cbd79b6b9b4
Former-commit-id: 8e0c4a7c70905f515f10b7ad17077e42dbce7e4a [formerly d576cf89831968e4b6d972279add9a571f934c7c]
Former-commit-id: 9508887808bd8d888911e5b801180124bad7d072
Former-commit-id: 83245f1c040f9fdaee900aee9a08efd9e40c1f8d
Former-commit-id: 65380a255ed238316df9da4ec1865eaeea4ffee1
Former-commit-id: ef70b25a26296e2d17945d77175934a4e1e9e94d
Former-commit-id: 40cd5c6889f026242af0508bd051d138d7d973d8
---
 src/pages/demo/d2-crud/demo16/code.js   | 41 +++++++++++++++++++------
 src/pages/demo/d2-crud/demo16/doc.md    |  2 +-
 src/pages/demo/d2-crud/demo16/index.vue | 38 +++++++++++++++++------
 3 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo16/code.js b/src/pages/demo/d2-crud/demo16/code.js
index 61118115..d8904f76 100644
--- a/src/pages/demo/d2-crud/demo16/code.js
+++ b/src/pages/demo/d2-crud/demo16/code.js
@@ -1,15 +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"
       :form-options="formOptions"
       @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 +54,7 @@ export default {
             address: '上海市普陀区金沙江路 1516 弄'
           }
       ],
-      addButton: {
-        icon: 'el-icon-plus',
-        size: 'small'
-      },
-      formTemplate: {
+      addTemplate: {
         date: {
           title: '日期',
           value: '2016-05-05'
@@ -79,6 +76,32 @@ export default {
     }
   },
   methods: {
+    // 普通的新增
+    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(() => {
diff --git a/src/pages/demo/d2-crud/demo16/doc.md b/src/pages/demo/d2-crud/demo16/doc.md
index 6e1e63ea..d2bc3ee5 100644
--- 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`对象来灵活定义新的模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增。代码如下：
diff --git a/src/pages/demo/d2-crud/demo16/index.vue b/src/pages/demo/d2-crud/demo16/index.vue
index a7858868..e1126c49 100644
--- a/src/pages/demo/d2-crud/demo16/index.vue
+++ b/src/pages/demo/d2-crud/demo16/index.vue
@@ -2,15 +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"
       @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 +70,7 @@ export default {
           address: '上海市普陀区金沙江路 1516 弄'
         }
       ],
-      addButton: {
-        icon: 'el-icon-plus',
-        size: 'small'
-      },
-      formTemplate: {
+      addTemplate: {
         date: {
           title: '日期',
           value: '2016-05-05'
@@ -96,6 +92,30 @@ export default {
     }
   },
   methods: {
+    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(() => {

From 86d7f32edc6c9ad66884e9780ba5e206ea3a60f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 14:06:02 +0800
Subject: [PATCH 06/19] no message

Former-commit-id: 6a615e3d27fb5af0a4f2a528d4bc0404f6d93b08 [formerly 6a615e3d27fb5af0a4f2a528d4bc0404f6d93b08 [formerly 6a615e3d27fb5af0a4f2a528d4bc0404f6d93b08 [formerly 6a615e3d27fb5af0a4f2a528d4bc0404f6d93b08 [formerly eeac2dbd8728abdfbbb1e81664c3b4f99196fa7f [formerly 68163edafb6cf8d2e88e1a03b092f87bff5695e4]]]]]
Former-commit-id: 6056aad39dbae0f175c96da417f720d07ae3239e
Former-commit-id: 4731877ba5c4087c93af816cc82b8c72787d1be1
Former-commit-id: c4af02faeca1ad699f390f11b223f5119af73245 [formerly 98ff003bb0026fcf6ad19beaf86a9e19bfa98c36]
Former-commit-id: 5aa59f358ad90ed90926dfe467c59e92b05bed63
Former-commit-id: eff84396849b3f6a3c3937d5fe3de573a569c86e
Former-commit-id: 367cb8aca8dd97927404acd6dfaee12ae9224f75
Former-commit-id: 59e156f8d1f663e1813c265adfd56396de38264d
Former-commit-id: 96cca44fadf03d4dec6adf118cd402befae1ea92
---
 src/pages/demo/d2-crud/demo16/code.js   | 2 +-
 src/pages/demo/d2-crud/demo29/code.js   | 2 +-
 src/pages/demo/d2-crud/demo29/index.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo16/code.js b/src/pages/demo/d2-crud/demo16/code.js
index d8904f76..ae82850d 100644
--- a/src/pages/demo/d2-crud/demo16/code.js
+++ b/src/pages/demo/d2-crud/demo16/code.js
@@ -116,7 +116,7 @@ export default {
           address: '我是通过done事件传入的数据！'
         })
         this.formOptions.saveLoading = false
-      }, 300);
+      }, 300)
     },
     handleDialogCancel (done) {
       this.$message({
diff --git a/src/pages/demo/d2-crud/demo29/code.js b/src/pages/demo/d2-crud/demo29/code.js
index 3f4e3450..ecb00f59 100644
--- a/src/pages/demo/d2-crud/demo29/code.js
+++ b/src/pages/demo/d2-crud/demo29/code.js
@@ -65,7 +65,7 @@ export default {
         this.loading = false
       }).catch(err => {
         console.log('err', err)
-        this.loading = falser
+        this.loading = false
       })
     }
   }
diff --git a/src/pages/demo/d2-crud/demo29/index.vue b/src/pages/demo/d2-crud/demo29/index.vue
index 525b4982..724634c9 100644
--- a/src/pages/demo/d2-crud/demo29/index.vue
+++ b/src/pages/demo/d2-crud/demo29/index.vue
@@ -80,7 +80,7 @@ export default {
         this.loading = false
       }).catch(err => {
         console.log('err', err)
-        this.loading = falser
+        this.loading = false
       })
     }
   }

From 6afb7bd6ab92689b3f26612f3be13ef763ea42d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 14:23:10 +0800
Subject: [PATCH 07/19] demo17

Former-commit-id: 3f8978cbce003b596c3c70cef9b5e3b7fea67919 [formerly 3f8978cbce003b596c3c70cef9b5e3b7fea67919 [formerly 3f8978cbce003b596c3c70cef9b5e3b7fea67919 [formerly 3f8978cbce003b596c3c70cef9b5e3b7fea67919 [formerly af03b248ed130578a52df68cc9f056ff74c97f84 [formerly 8571b957930a1b3f44d064d6684485ca3cbdf7f5]]]]]
Former-commit-id: 29fb645bf91fbb79fa25644600a428133fc215ca
Former-commit-id: d912c2fb62daf287a8127a72eb33573cc8df189a
Former-commit-id: 515ff8c21c5504054a105034aa29d33e8d1fb231 [formerly 17d1479cea563999e628205edfd604fa7984a635]
Former-commit-id: 15d093c854129e2dc3fd1a2c753116271953b05e
Former-commit-id: 12cd7f74e5c91d9fcced2aee4e87784299e0d8f6
Former-commit-id: 002892c7df27cffcc34e68011f192b012769eca3
Former-commit-id: 821d2a86d3ac89e34294f36e096e8e8499569a68
Former-commit-id: b5057b8958e81ef6a8c12df48d425ad64629167a
---
 src/pages/demo/d2-crud/demo17/code.js   | 38 ++++++++++++++-----------
 src/pages/demo/d2-crud/demo17/doc.md    |  2 +-
 src/pages/demo/d2-crud/demo17/index.vue | 35 ++++++++++++-----------
 src/pages/demo/d2-crud/demo18/code.js   |  1 -
 src/pages/demo/d2-crud/demo18/index.vue |  1 -
 src/pages/demo/d2-crud/demo19/code.js   |  1 -
 src/pages/demo/d2-crud/demo19/index.vue |  1 -
 src/pages/demo/d2-crud/demo20/code.js   |  1 -
 src/pages/demo/d2-crud/demo20/index.vue |  1 -
 src/pages/demo/d2-crud/demo21/code.js   |  1 -
 src/pages/demo/d2-crud/demo21/index.vue |  1 -
 src/pages/demo/d2-crud/demo22/code.js   |  1 -
 src/pages/demo/d2-crud/demo22/index.vue |  1 -
 13 files changed, 41 insertions(+), 44 deletions(-)

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"

From 152b5a3a27ba0105de4395fc3745df44721236b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 14:32:58 +0800
Subject: [PATCH 08/19] demo20

Former-commit-id: 02b425973796d2790aebfff811b42c78e11c5ddc [formerly 02b425973796d2790aebfff811b42c78e11c5ddc [formerly 02b425973796d2790aebfff811b42c78e11c5ddc [formerly 02b425973796d2790aebfff811b42c78e11c5ddc [formerly d73980acfefa9959eec66f2bf6a378f5680a9a1c [formerly 31eedb0beb9e04b884e5eb1a8842755b62792891]]]]]
Former-commit-id: b659944ff3a99ec41506d13d8444bebce19078eb
Former-commit-id: 33474a46d59d8658d9a9c9a15c988f6167e7f16b
Former-commit-id: 268dcf32b4feba1a5b4b24ace82c85c46f865574 [formerly 9ff745d1271faee8b1414a1738c804f2bf4b6b55]
Former-commit-id: 0825f128fcb45840e522693fbcb1ddd19f4998a5
Former-commit-id: 272ed38b63d5f4ccfa18287d5335869596d954d0
Former-commit-id: 368b3f603459724b2b7811e0a1db842a93fe0028
Former-commit-id: 6a883640f660c3bace2c2f1afa6b1a23354344bf
Former-commit-id: c56661bdc643e62c43b8443a89788eb112415e59
---
 src/pages/demo/d2-crud/demo20/code.js   | 4 ++--
 src/pages/demo/d2-crud/demo20/doc.md    | 2 +-
 src/pages/demo/d2-crud/demo20/index.vue | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo20/code.js b/src/pages/demo/d2-crud/demo20/code.js
index b29ea6d5..c739d857 100644
--- a/src/pages/demo/d2-crud/demo20/code.js
+++ b/src/pages/demo/d2-crud/demo20/code.js
@@ -4,7 +4,7 @@ export default `<template>
       :columns="columns"
       :data="data"
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel"/>
@@ -59,7 +59,7 @@ export default {
           fixed: 'right'
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: '',
diff --git a/src/pages/demo/d2-crud/demo20/doc.md b/src/pages/demo/d2-crud/demo20/doc.md
index 88eaf7cb..4bbd0fe9 100644
--- 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)。代码如下：
diff --git a/src/pages/demo/d2-crud/demo20/index.vue b/src/pages/demo/d2-crud/demo20/index.vue
index d2de7952..cc5780aa 100644
--- a/src/pages/demo/d2-crud/demo20/index.vue
+++ b/src/pages/demo/d2-crud/demo20/index.vue
@@ -5,7 +5,7 @@
       :columns="columns"
       :data="data"
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel">
@@ -76,7 +76,7 @@ export default {
           fixed: 'right'
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: '',

From 4ff4ea3d9172ff437f0a17c9a9741672a8a26c4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Mon, 24 Dec 2018 14:48:47 +0800
Subject: [PATCH 09/19] demo21

Former-commit-id: 77efa956a8c75a0ea24e549ab140d841e52241ba [formerly 77efa956a8c75a0ea24e549ab140d841e52241ba [formerly 77efa956a8c75a0ea24e549ab140d841e52241ba [formerly 77efa956a8c75a0ea24e549ab140d841e52241ba [formerly b16e2b134c1e9f84b1c87cdd88f4297c953528b2 [formerly 613f02ee4c45aa895a1426fc12b4c8a1812fcdf9]]]]]
Former-commit-id: 4b28cfb51bafd4a7c7270635d000c76d7f131226
Former-commit-id: 5f6496adcda69de010ba05fbb62fd52be74b20d4
Former-commit-id: 18a36bf7a4bab1571c1cecb2d5f9c44e6bd81aff [formerly b0a4fc887abc4379d76b4f0e4477e16faa220f66]
Former-commit-id: 6e2c110b50dc282e141bc01f0a5afcbbdeacdfa9
Former-commit-id: 3e3b9f86fd7d2058ef73c4c60a5e9de3e2a68e76
Former-commit-id: 67176ed2397da7deadbb102acfbb8042586cec3f
Former-commit-id: d7012f84b0d3a4ab9d1d90a52a43976902005a54
Former-commit-id: 70682c560f7a171ef808bb3af0e85c9a786d8a94
---
 src/pages/demo/d2-crud/demo21/code.js   | 4 ++--
 src/pages/demo/d2-crud/demo21/doc.md    | 2 +-
 src/pages/demo/d2-crud/demo21/index.vue | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo21/code.js b/src/pages/demo/d2-crud/demo21/code.js
index 3eca134b..2a698098 100644
--- a/src/pages/demo/d2-crud/demo21/code.js
+++ b/src/pages/demo/d2-crud/demo21/code.js
@@ -4,7 +4,7 @@ export default `<template>
       :columns="columns"
       :data="data"
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel"/>
@@ -59,7 +59,7 @@ export default {
           fixed: 'right'
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: '',
diff --git a/src/pages/demo/d2-crud/demo21/doc.md b/src/pages/demo/d2-crud/demo21/doc.md
index 7ca59dde..4c1db7e8 100644
--- 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` 属性来控制栅格占据的列数。代码如下：
diff --git a/src/pages/demo/d2-crud/demo21/index.vue b/src/pages/demo/d2-crud/demo21/index.vue
index 89dedd95..e74e8774 100644
--- a/src/pages/demo/d2-crud/demo21/index.vue
+++ b/src/pages/demo/d2-crud/demo21/index.vue
@@ -5,7 +5,7 @@
       :columns="columns"
       :data="data"
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel">
@@ -76,7 +76,7 @@ export default {
           fixed: 'right'
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: '',

From 9d4a9af5aa21f723c38f73ad517dcca7c436cbb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 09:40:40 +0800
Subject: [PATCH 10/19] demo22

Former-commit-id: 516f429f12d7cede7fe8dcba63f9ae0df7490be4 [formerly 516f429f12d7cede7fe8dcba63f9ae0df7490be4 [formerly 516f429f12d7cede7fe8dcba63f9ae0df7490be4 [formerly 516f429f12d7cede7fe8dcba63f9ae0df7490be4 [formerly ecdf89609ed868b930ebd3a7daf34dea36638507 [formerly f043c34a3b53d77c5c3d6a8a0186e3cb58adb991]]]]]
Former-commit-id: 385f4794597cefd09beda84f721b2962607465a0
Former-commit-id: d8e900bc4a5887cda041444d82ede966b813b20b
Former-commit-id: 340653ee70150f438304ac2037bc0e5ad3c282d7 [formerly a089f9bdf778a961388e2c3e5293bfac7097403f]
Former-commit-id: 01b782101d2e79644a2fcd411b5e678bdd43e8de
Former-commit-id: c0f0ef360c820310e243556812afedeb6129adca
Former-commit-id: ca94fee2a3938983e318797ee9b36ed18eeb0528
Former-commit-id: b73a023aa8b6d3e08aee20b8d9f79ef88a1b9a53
Former-commit-id: 181da64d2d5f93b3daa2584ef46990dea5e3c6ad
---
 package.json                            |  2 +-
 src/pages/demo/d2-crud/demo17/index.vue |  2 +-
 src/pages/demo/d2-crud/demo22/code.js   | 20 +++++++++++++-------
 src/pages/demo/d2-crud/demo22/doc.md    |  2 +-
 src/pages/demo/d2-crud/demo22/index.vue | 17 +++++++++++------
 yarn.lock.REMOVED.git-id                |  2 +-
 6 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index f610ced7..0f6fdb5f 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@d2-projects/d2-crud": "^2.0.0",
+    "@d2-projects/d2-crud": "^2.0.2",
     "@d2-projects/vue-filters-date": "^1.0.2",
     "@d2-projects/vue-table-export": "^1.0.1",
     "@d2-projects/vue-table-import": "^1.0.0",
diff --git a/src/pages/demo/d2-crud/demo17/index.vue b/src/pages/demo/d2-crud/demo17/index.vue
index 66fb32a8..6bd6c9b5 100644
--- a/src/pages/demo/d2-crud/demo17/index.vue
+++ b/src/pages/demo/d2-crud/demo17/index.vue
@@ -136,7 +136,7 @@ export default {
   methods: {
     editRowWithNewTemplate () {
       this.$refs.d2Crud.showDialog({
-        mode: "edit",
+        mode: 'edit',
         rowIndex: 2,
         template: {
           date: {
diff --git a/src/pages/demo/d2-crud/demo22/code.js b/src/pages/demo/d2-crud/demo22/code.js
index 30eb26de..e0590166 100644
--- a/src/pages/demo/d2-crud/demo22/code.js
+++ b/src/pages/demo/d2-crud/demo22/code.js
@@ -1,15 +1,16 @@
 export default `<template>
   <div>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      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>
 
@@ -58,7 +59,7 @@ export default {
         icon: 'el-icon-plus',
         size: 'small'
       },
-      formTemplate: {
+      addTemplate: {
         date: {
           title: '日期',
           value: ''
@@ -77,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' } ]
@@ -85,6 +86,11 @@ export default {
     }
   },
   methods: {
+    addRow () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add'
+      })
+    },
     handleRowAdd (row, done) {
       this.formOptions.saveLoading = true
       setTimeout(() => {
diff --git a/src/pages/demo/d2-crud/demo22/doc.md b/src/pages/demo/d2-crud/demo22/doc.md
index 71ac15a8..6324ce0d 100644
--- 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)。代码如下：
diff --git a/src/pages/demo/d2-crud/demo22/index.vue b/src/pages/demo/d2-crud/demo22/index.vue
index 224f2995..09407bf6 100644
--- a/src/pages/demo/d2-crud/demo22/index.vue
+++ b/src/pages/demo/d2-crud/demo22/index.vue
@@ -2,15 +2,15 @@
   <d2-container :filename="filename">
     <template slot="header">表单校验</template>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      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"/>
@@ -75,7 +75,7 @@ export default {
         icon: 'el-icon-plus',
         size: 'small'
       },
-      formTemplate: {
+      addTemplate: {
         date: {
           title: '日期',
           value: ''
@@ -94,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' } ]
@@ -102,6 +102,11 @@ export default {
     }
   },
   methods: {
+    addRow () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add'
+      })
+    },
     handleRowAdd (row, done) {
       this.formOptions.saveLoading = true
       setTimeout(() => {
diff --git a/yarn.lock.REMOVED.git-id b/yarn.lock.REMOVED.git-id
index 755e2e0e..d1de7f9f 100644
--- a/yarn.lock.REMOVED.git-id
+++ b/yarn.lock.REMOVED.git-id
@@ -1 +1 @@
-0112dcaa59d17f79454b15cb17a0dc1116fdeb13
\ No newline at end of file
+f4643ebdf5dd651b6d5e06f58d00fd84549c6cd3
\ No newline at end of file

From 8dae631c722c349f8ec3b0b64c52ad8a4d2d851d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 09:58:50 +0800
Subject: [PATCH 11/19] demo23

Former-commit-id: ab8efad363a2f1602c451f896366f454f840d25f [formerly ab8efad363a2f1602c451f896366f454f840d25f [formerly ab8efad363a2f1602c451f896366f454f840d25f [formerly ab8efad363a2f1602c451f896366f454f840d25f [formerly c9b73d210e1a62667cb62b37ace4e9471ef90e87 [formerly adc99648f4a6320caf8ce8d257424c273119e39d]]]]]
Former-commit-id: aa172c69b22148896cc6e27c5599fe42a0afc2f7
Former-commit-id: 83ecac80bd8d0066cf16e991f7449e257f08d817
Former-commit-id: 91f38ffb3a34d4ed1b605c2507720945d2a62b0d [formerly 2433e6394eeff33d424d1dc853c9db30dd72885e]
Former-commit-id: dad524c86d20f6d9fc4822502a350a97f3235a08
Former-commit-id: 594e49eb23e82b6dd3174a2aeec69915d582dece
Former-commit-id: e84456f20504cbb9b663a9a231099ced8655ff0d
Former-commit-id: 2fb4d85611c343221b5e02bac54a1fcaa9e25a46
Former-commit-id: 2a2229b3f0540538280ecbaabe92fe3fe3d496dd
---
 src/pages/demo/d2-crud/demo23/code.js   | 11 ++++++++++-
 src/pages/demo/d2-crud/demo23/doc.md    |  2 +-
 src/pages/demo/d2-crud/demo23/index.vue | 11 ++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo23/code.js b/src/pages/demo/d2-crud/demo23/code.js
index b652cf79..d3ec2b8c 100644
--- 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="cellDataChange"/>
   </div>
 </template>
 
@@ -73,6 +74,14 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    cellDataChange ({rowIndex, key, value, row}) {
+      console.log(rowIndex)
+      console.log(key)
+      console.log(value)
+      console.log(row)
+    }
   }
 }
 </script>`
diff --git a/src/pages/demo/d2-crud/demo23/doc.md b/src/pages/demo/d2-crud/demo23/doc.md
index 9199de3b..a850515e 100644
--- 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` 是改变所在行的所有数据。代码如下：
diff --git a/src/pages/demo/d2-crud/demo23/index.vue b/src/pages/demo/d2-crud/demo23/index.vue
index d762d2c3..522b1a4e 100644
--- 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="cellDataChange"/>
     <el-card shadow="never" class="d2-mb">
       <d2-markdown :source="doc"/>
     </el-card>
@@ -89,6 +90,14 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    cellDataChange ({rowIndex, key, value, row}) {
+      console.log(rowIndex)
+      console.log(key)
+      console.log(value)
+      console.log(row)
+    }
   }
 }
 </script>

From be85c96e7ef49751c764ad74dffe2c1c5874329c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 10:05:31 +0800
Subject: [PATCH 12/19] demo26

Former-commit-id: 3e3292799b6004ececc2a2df0f7f90b83ddd74c0 [formerly 3e3292799b6004ececc2a2df0f7f90b83ddd74c0 [formerly 3e3292799b6004ececc2a2df0f7f90b83ddd74c0 [formerly 3e3292799b6004ececc2a2df0f7f90b83ddd74c0 [formerly 3d81fb081e5cb89109618cd64ad879cab2f14258 [formerly d81191c75b0c34fe555c4096a966109715b6d841]]]]]
Former-commit-id: 2fa3664208ec69b7baa112f5fcc1090fd1569f34
Former-commit-id: de12556ffa740139915e8594add6fbb3e87c0c9c
Former-commit-id: be0a447172362bc1190a35f1562907aac8498fbb [formerly ac662db0542b6ce34c5d0a6846b42d379e488248]
Former-commit-id: 1fbea33902875cc0c2b9e61b029b50c2a776f651
Former-commit-id: fc68289f9fb02a4f62ddf58530011615157e3b0e
Former-commit-id: 39faeb044da9dbd23c984beb3b7273af8b175ca1
Former-commit-id: 891b382ca2d4e753db2d591ee601521fb9369b3a
Former-commit-id: 8685670c0f29495d7bd4d3c3f18d7044cfcdf74a
---
 src/pages/demo/d2-crud/demo26/codeOverall.js | 4 ++--
 src/pages/demo/d2-crud/demo26/codePart.js    | 4 ++--
 src/pages/demo/d2-crud/demo26/doc.md         | 2 +-
 src/pages/demo/d2-crud/demo26/index.vue      | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo26/codeOverall.js b/src/pages/demo/d2-crud/demo26/codeOverall.js
index 8de14e77..3b9fd872 100644
--- 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: ''
diff --git a/src/pages/demo/d2-crud/demo26/codePart.js b/src/pages/demo/d2-crud/demo26/codePart.js
index 803a7718..51b394e8 100644
--- 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: ''
diff --git a/src/pages/demo/d2-crud/demo26/doc.md b/src/pages/demo/d2-crud/demo26/doc.md
index dc3426e9..32847f66 100644
--- 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)的写法，代码如下：
diff --git a/src/pages/demo/d2-crud/demo26/index.vue b/src/pages/demo/d2-crud/demo26/index.vue
index 7cf3a5e4..84615f14 100644
--- 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: ''

From 482c2821c0f0e606eb8e0d9cfbfa63da4082f995 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 10:12:51 +0800
Subject: [PATCH 13/19] demo25

Former-commit-id: 15f81c4f67b5fd76c210433c0832e8130d300e58 [formerly 15f81c4f67b5fd76c210433c0832e8130d300e58 [formerly 15f81c4f67b5fd76c210433c0832e8130d300e58 [formerly 15f81c4f67b5fd76c210433c0832e8130d300e58 [formerly 0da051369cae7b1a5241adcf60dc8829b760857d [formerly f10461d471dbc849af99cce2a03aef16e9b86b9b]]]]]
Former-commit-id: e143c9e1723f0996ca5a97b2f98af50de3213260
Former-commit-id: e558efe07fa739e53e2541297287acaefd76829c
Former-commit-id: 9e306482869711050139549de587f5e0fa6f9bfc [formerly f64802f58eb35629896e865a20434aa459c9c743]
Former-commit-id: 0e15c7410e7fe87f336823e35bc2482ba983c5e8
Former-commit-id: 20d162920b5fbe9c3663dc89a251ba56ceabd540
Former-commit-id: d8a8dfd14648a70af5045c479a822903b4133c77
Former-commit-id: c206a9ed9336853dfc8084b04393832676d6ca66
Former-commit-id: 1cb8cd4b0dd4cd8a2e23719ed377fcf2c15fb2d5
---
 src/pages/demo/d2-crud/demo25/MyTag.vue        | 2 ++
 src/pages/demo/d2-crud/demo25/codeComponent.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/pages/demo/d2-crud/demo25/MyTag.vue b/src/pages/demo/d2-crud/demo25/MyTag.vue
index fbba8dd4..4be38954 100644
--- 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 ? '是' : '否'
     }
diff --git a/src/pages/demo/d2-crud/demo25/codeComponent.js b/src/pages/demo/d2-crud/demo25/codeComponent.js
index cf22be64..64fe00a9 100644
--- 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 ? '是' : '否'
     }

From 4251845f88027f55dba5d6fd8d4ab861173e2968 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 10:43:17 +0800
Subject: [PATCH 14/19] demo30

Former-commit-id: 3e1cd03dce2edaf402125f5868808b634bf888ed [formerly 3e1cd03dce2edaf402125f5868808b634bf888ed [formerly 3e1cd03dce2edaf402125f5868808b634bf888ed [formerly 3e1cd03dce2edaf402125f5868808b634bf888ed [formerly 6a92e3f6c836c8b10e9292af2b47390e04980acc [formerly d447b7be1661f25ef123f8ab4c7a1949d6e261ef]]]]]
Former-commit-id: 98904511cff57d5a500acedb2fd895b2be737aed
Former-commit-id: e515e3c9575ccf7ca44e1bac54737a2387af6a9a
Former-commit-id: de69da72de90c7efa5fbecb8273d3aae18c4b8a2 [formerly 5f003bd34524b05ddf0abe1ce1248fe1ff4fb107]
Former-commit-id: aed393341430eb79f8bb4038363415f144b366fa
Former-commit-id: 39e4d50f93e1d84cd21373d83e47fc34105ef1ee
Former-commit-id: 5796dbbf8c06757d46f1c228c6f2c9f50da4051a
Former-commit-id: 7b060dd4b679605d875f28d6b85f8eeb90bdee8b
Former-commit-id: bc0937e1098f7c2115d582d95aeb59854beba1c9
---
 src/menu/modules/demo-d2-crud.js        |   1 +
 src/pages/demo/d2-crud/demo30/code.js   | 134 +++++++++++++++++++++
 src/pages/demo/d2-crud/demo30/doc.md    |   1 +
 src/pages/demo/d2-crud/demo30/index.vue | 151 ++++++++++++++++++++++++
 src/router/modules/d2-crud.js           |   3 +-
 5 files changed, 289 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/demo/d2-crud/demo30/code.js
 create mode 100644 src/pages/demo/d2-crud/demo30/doc.md
 create mode 100644 src/pages/demo/d2-crud/demo30/index.vue

diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index 3300bb08..b0d61458 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -40,6 +40,7 @@ export default {
         { path: `${pre}demo22`, title: '表单校验' },
         { path: `${pre}demo23`, title: '表格内编辑' },
         { path: `${pre}demo25`, title: '表格自定义组件' },
+        { path: `${pre}demo30`, title: '表单事件监听' },
         { path: `${pre}demo26`, title: '表单自定义组件' }
       ]
     }
diff --git a/src/pages/demo/d2-crud/demo30/code.js b/src/pages/demo/d2-crud/demo30/code.js
new file mode 100644
index 00000000..eba2a5a0
--- /dev/null
+++ 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>`
diff --git a/src/pages/demo/d2-crud/demo30/doc.md b/src/pages/demo/d2-crud/demo30/doc.md
new file mode 100644
index 00000000..7bf128ce
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo30/doc.md
@@ -0,0 +1 @@
+通过 `form-data-change` 事件可以监听表单内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 {key, value}，`key` 为改变的字段，`value` 为改变后的值。代码如下：
diff --git a/src/pages/demo/d2-crud/demo30/index.vue b/src/pages/demo/d2-crud/demo30/index.vue
new file mode 100644
index 00000000..c69e6eef
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo30/index.vue
@@ -0,0 +1,151 @@
+<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'
+import { BusinessTable1List } from '@api/demo.business.table.1'
+
+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>
diff --git a/src/router/modules/d2-crud.js b/src/router/modules/d2-crud.js
index c71c79cb..b23e9e10 100644
--- a/src/router/modules/d2-crud.js
+++ b/src/router/modules/d2-crud.js
@@ -38,6 +38,7 @@ 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: '表单事件监听' } }
   ])('demo-d2-crud-')
 }

From 976313bffb9baca81432c9f97a25636f84aa6fa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 13:59:37 +0800
Subject: [PATCH 15/19] demo31

Former-commit-id: f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly 3dd6a8182394b5e228415fdb74cafa540ff637ce [formerly 2357e57aaa8e9446e37a6bddb38974e1925bf55d]]]]]
Former-commit-id: fbac67443f4b103cc40afdac42189d6030c02374
Former-commit-id: 113f699cf579ea681f97a17a90783909e817c754
Former-commit-id: 342be87ea820c21a99677f4bf367cf86208ac805 [formerly 5d23eec7280ba7a52e1b1622cb2b27f95172e8ff]
Former-commit-id: 785cbd080e51be48484fbd7c41e931a796922de8
Former-commit-id: 52b5723a9e77044a86c63b4fe239945b74ce89a0
Former-commit-id: 073b10060b38e82221b4c3ce14e96a50c8155d12
Former-commit-id: 3120c8c429a6986b53bdc34e401965d181cadb41
Former-commit-id: bc38d66f3039940a24fc8958a11050e1058ae37e
---
 src/menu/modules/demo-d2-crud.js        |   3 +-
 src/pages/demo/d2-crud/demo16/doc.md    |   2 +-
 src/pages/demo/d2-crud/demo17/doc.md    |   2 +-
 src/pages/demo/d2-crud/demo30/index.vue |   1 -
 src/pages/demo/d2-crud/demo31/code.js   |  88 ++++++++++++++++++++
 src/pages/demo/d2-crud/demo31/doc.md    |  15 ++++
 src/pages/demo/d2-crud/demo31/index.vue | 105 ++++++++++++++++++++++++
 src/router/modules/d2-crud.js           |   3 +-
 8 files changed, 214 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/demo/d2-crud/demo31/code.js
 create mode 100644 src/pages/demo/d2-crud/demo31/doc.md
 create mode 100644 src/pages/demo/d2-crud/demo31/index.vue

diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index b0d61458..944929f9 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -41,7 +41,8 @@ export default {
         { path: `${pre}demo23`, title: '表格内编辑' },
         { path: `${pre}demo25`, title: '表格自定义组件' },
         { path: `${pre}demo30`, title: '表单事件监听' },
-        { path: `${pre}demo26`, title: '表单自定义组件' }
+        { path: `${pre}demo26`, title: '表单自定义组件' },
+        { path: `${pre}demo31`, title: 'Crud事件' }
       ]
     }
   ])('/demo/d2-crud/')
diff --git a/src/pages/demo/d2-crud/demo16/doc.md b/src/pages/demo/d2-crud/demo16/doc.md
index d2bc3ee5..af53fbfa 100644
--- a/src/pages/demo/d2-crud/demo16/doc.md
+++ b/src/pages/demo/d2-crud/demo16/doc.md
@@ -1 +1 @@
-通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增。代码如下：
+通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
diff --git a/src/pages/demo/d2-crud/demo17/doc.md b/src/pages/demo/d2-crud/demo17/doc.md
index 5943668f..f67024ef 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` 对象可以开启编辑模式，需要传入 `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)` 可以取消编辑。代码如下：
+通过给 `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)` 可以取消编辑，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
diff --git a/src/pages/demo/d2-crud/demo30/index.vue b/src/pages/demo/d2-crud/demo30/index.vue
index c69e6eef..37181a1c 100644
--- a/src/pages/demo/d2-crud/demo30/index.vue
+++ b/src/pages/demo/d2-crud/demo30/index.vue
@@ -26,7 +26,6 @@
 <script>
 import doc from './doc.md'
 import code from './code.js'
-import { BusinessTable1List } from '@api/demo.business.table.1'
 
 export default {
   data () {
diff --git a/src/pages/demo/d2-crud/demo31/code.js b/src/pages/demo/d2-crud/demo31/code.js
new file mode 100644
index 00000000..9757f35f
--- /dev/null
+++ 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>`
diff --git a/src/pages/demo/d2-crud/demo31/doc.md b/src/pages/demo/d2-crud/demo31/doc.md
new file mode 100644
index 00000000..8775547b
--- /dev/null
+++ 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   
+
+代码如下：
diff --git a/src/pages/demo/d2-crud/demo31/index.vue b/src/pages/demo/d2-crud/demo31/index.vue
new file mode 100644
index 00000000..30e60916
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo31/index.vue
@@ -0,0 +1,105 @@
+<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'
+import { BusinessTable1List } from '@api/demo.business.table.1'
+
+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>
diff --git a/src/router/modules/d2-crud.js b/src/router/modules/d2-crud.js
index b23e9e10..14d67c16 100644
--- a/src/router/modules/d2-crud.js
+++ b/src/router/modules/d2-crud.js
@@ -39,6 +39,7 @@ export default {
     { 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: 'demo30', name: `${pre}demo30`, component: () => import('@/pages/demo/d2-crud/demo30'), 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-')
 }

From 14dc6b9f861c47308841238dd5c31c8672489da9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 14:05:25 +0800
Subject: [PATCH 16/19] demo16 demo17

Former-commit-id: 867d847b396c542e5f5bc492d3ece0e228d06f9f [formerly 867d847b396c542e5f5bc492d3ece0e228d06f9f [formerly 867d847b396c542e5f5bc492d3ece0e228d06f9f [formerly 867d847b396c542e5f5bc492d3ece0e228d06f9f [formerly 596c63b1c4823c7500f856a5c8711944eac856aa [formerly 659b57e61a0c0aa379d97d4dd402d8b2d4cb5b77]]]]]
Former-commit-id: 40710ae76de1296f80c993a039c3e47ca5df46b6
Former-commit-id: fc8e8c4db0aa8c0678fba334fe631bf8cf384150
Former-commit-id: 9a13303ea6639a27a3ef75cd5dd88b67faa1f1a3 [formerly 8b740f853f28e9dc861e7542f687b8b99ae66e51]
Former-commit-id: e1ba6bcbb02d33909aefdee57cca0c966ac0a1ab
Former-commit-id: 276f2966811469a7b61ab18519b53454db165efb
Former-commit-id: 69c47e12347f1d85169983bca1954246fce030b9
Former-commit-id: 4cfb442781f0b223068c169b02245cae038f056a
Former-commit-id: 4ce13a2c60541e5b978b24d412141f1e0903ed45
---
 src/pages/demo/d2-crud/demo16/code.js   | 1 +
 src/pages/demo/d2-crud/demo16/doc.md    | 2 +-
 src/pages/demo/d2-crud/demo16/index.vue | 1 +
 src/pages/demo/d2-crud/demo17/code.js   | 1 +
 src/pages/demo/d2-crud/demo17/doc.md    | 2 +-
 src/pages/demo/d2-crud/demo17/index.vue | 1 +
 6 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/demo/d2-crud/demo16/code.js b/src/pages/demo/d2-crud/demo16/code.js
index ae82850d..de983f48 100644
--- a/src/pages/demo/d2-crud/demo16/code.js
+++ b/src/pages/demo/d2-crud/demo16/code.js
@@ -4,6 +4,7 @@ export default `<template>
       ref="d2Crud"
       :columns="columns"
       :data="data"
+      add-title="我的新增"
       :form-template="formTemplate"
       :form-options="formOptions"
       @row-add="handleRowAdd"
diff --git a/src/pages/demo/d2-crud/demo16/doc.md b/src/pages/demo/d2-crud/demo16/doc.md
index af53fbfa..aefed53e 100644
--- a/src/pages/demo/d2-crud/demo16/doc.md
+++ b/src/pages/demo/d2-crud/demo16/doc.md
@@ -1 +1 @@
-通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
+通过 `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` 方法可以关闭模态框。代码如下：
diff --git a/src/pages/demo/d2-crud/demo16/index.vue b/src/pages/demo/d2-crud/demo16/index.vue
index e1126c49..0e448aae 100644
--- a/src/pages/demo/d2-crud/demo16/index.vue
+++ b/src/pages/demo/d2-crud/demo16/index.vue
@@ -5,6 +5,7 @@
       ref="d2Crud"
       :columns="columns"
       :data="data"
+      add-title="我的新增"
       :add-template="addTemplate"
       :form-options="formOptions"
       @row-add="handleRowAdd"
diff --git a/src/pages/demo/d2-crud/demo17/code.js b/src/pages/demo/d2-crud/demo17/code.js
index b27b1881..c08ce9a9 100644
--- a/src/pages/demo/d2-crud/demo17/code.js
+++ b/src/pages/demo/d2-crud/demo17/code.js
@@ -5,6 +5,7 @@ export default `<template>
       :columns="columns"
       :data="data"
       :rowHandle="rowHandle"
+      edit-title="我的修改"
       :edit-template="editTemplate"
       :form-options="formOptions"
       @row-edit="handleRowEdit"
diff --git a/src/pages/demo/d2-crud/demo17/doc.md b/src/pages/demo/d2-crud/demo17/doc.md
index f67024ef..758cada1 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` 对象可以开启编辑模式，需要传入 `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)` 可以取消编辑，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
+通过给 `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` 方法可以关闭模态框。代码如下：
diff --git a/src/pages/demo/d2-crud/demo17/index.vue b/src/pages/demo/d2-crud/demo17/index.vue
index 6bd6c9b5..f546d109 100644
--- a/src/pages/demo/d2-crud/demo17/index.vue
+++ b/src/pages/demo/d2-crud/demo17/index.vue
@@ -6,6 +6,7 @@
       :columns="columns"
       :data="data"
       :rowHandle="rowHandle"
+      edit-title="我的修改"
       :edit-template="editTemplate"
       :form-options="formOptions"
       @row-edit="handleRowEdit"

From b4d2397683cb9825d1ab71f4608b2f21976a1475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 15:18:01 +0800
Subject: [PATCH 17/19] demo23 demo31

Former-commit-id: ed9dadf50f2193eeec3ef5072bf810b1b7e2b5dd [formerly ed9dadf50f2193eeec3ef5072bf810b1b7e2b5dd [formerly ed9dadf50f2193eeec3ef5072bf810b1b7e2b5dd [formerly ed9dadf50f2193eeec3ef5072bf810b1b7e2b5dd [formerly 16c483c1032832e9ef26020a326811482d6cfee9 [formerly c86eca3875760cde0a42ad7df1adc15f2a08467f]]]]]
Former-commit-id: 14ee873d368af7f98d384c1705125835e8adae4c
Former-commit-id: 97bb8dbb9422291d874d74ad28f9983c73bfeb75
Former-commit-id: 01f3201629e149dc83ca5ae269fff1f307d66716 [formerly 61102aeff8affc432332df1c13b37a154218dc3f]
Former-commit-id: 88aa7b8d6d3e458f8873a2a7946f3b881f8800da
Former-commit-id: 2f2e36b367f2a3aa8dc86d2b9d902a227b6382c7
Former-commit-id: 569de7466696a1b66eae9818e0f7b8a9644ab721
Former-commit-id: b0ca3c292629eae21b4f75fe91116225b796abd6
Former-commit-id: f788029bbdd61d920aeb79cb4d7d6df978e28b7c
---
 src/menu/modules/demo-d2-crud.js        | 2 +-
 src/pages/demo/d2-crud/demo23/code.js   | 4 ++--
 src/pages/demo/d2-crud/demo23/index.vue | 4 ++--
 src/pages/demo/d2-crud/demo31/index.vue | 2 +-
 src/router/modules/d2-crud.js           | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index 944929f9..ec7174ea 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -42,7 +42,7 @@ export default {
         { path: `${pre}demo25`, title: '表格自定义组件' },
         { path: `${pre}demo30`, title: '表单事件监听' },
         { path: `${pre}demo26`, title: '表单自定义组件' },
-        { path: `${pre}demo31`, title: 'Crud事件' }
+        { path: `${pre}demo31`, title: 'CRUD事件' }
       ]
     }
   ])('/demo/d2-crud/')
diff --git a/src/pages/demo/d2-crud/demo23/code.js b/src/pages/demo/d2-crud/demo23/code.js
index d3ec2b8c..8f795a57 100644
--- a/src/pages/demo/d2-crud/demo23/code.js
+++ b/src/pages/demo/d2-crud/demo23/code.js
@@ -3,7 +3,7 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      @cell-data-change="cellDataChange"/>
+      @cell-data-change="handleCellDataChange"/>
   </div>
 </template>
 
@@ -76,7 +76,7 @@ export default {
     }
   },
   methods: {
-    cellDataChange ({rowIndex, key, value, row}) {
+    handleCellDataChange ({rowIndex, key, value, row}) {
       console.log(rowIndex)
       console.log(key)
       console.log(value)
diff --git a/src/pages/demo/d2-crud/demo23/index.vue b/src/pages/demo/d2-crud/demo23/index.vue
index 522b1a4e..3deb2c99 100644
--- a/src/pages/demo/d2-crud/demo23/index.vue
+++ b/src/pages/demo/d2-crud/demo23/index.vue
@@ -4,7 +4,7 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      @cell-data-change="cellDataChange"/>
+      @cell-data-change="handleCellDataChange"/>
     <el-card shadow="never" class="d2-mb">
       <d2-markdown :source="doc"/>
     </el-card>
@@ -92,7 +92,7 @@ export default {
     }
   },
   methods: {
-    cellDataChange ({rowIndex, key, value, row}) {
+    handleCellDataChange ({rowIndex, key, value, row}) {
       console.log(rowIndex)
       console.log(key)
       console.log(value)
diff --git a/src/pages/demo/d2-crud/demo31/index.vue b/src/pages/demo/d2-crud/demo31/index.vue
index 30e60916..9420620f 100644
--- a/src/pages/demo/d2-crud/demo31/index.vue
+++ b/src/pages/demo/d2-crud/demo31/index.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container :filename="filename">
-    <template slot="header">Crud事件</template>
+    <template slot="header">CRUD事件</template>
     <d2-crud
       ref="d2Crud"
       :columns="columns"
diff --git a/src/router/modules/d2-crud.js b/src/router/modules/d2-crud.js
index 14d67c16..d4ff05a7 100644
--- a/src/router/modules/d2-crud.js
+++ b/src/router/modules/d2-crud.js
@@ -40,6 +40,6 @@ export default {
     { 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: '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事件' } }
+    { path: 'demo31', name: `${pre}demo31`, component: () => import('@/pages/demo/d2-crud/demo31'), meta: { ...meta, title: 'CRUD事件' } }
   ])('demo-d2-crud-')
 }

From 2399ffe2ce84597a11bde81e425454208d13b975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 17:34:00 +0800
Subject: [PATCH 18/19] demo31

Former-commit-id: 07c7fcb5d57ee49b97b24b811ac4e61c0fc0d7b6 [formerly 07c7fcb5d57ee49b97b24b811ac4e61c0fc0d7b6 [formerly 07c7fcb5d57ee49b97b24b811ac4e61c0fc0d7b6 [formerly 07c7fcb5d57ee49b97b24b811ac4e61c0fc0d7b6 [formerly 79b6a7f24548e812a1c7af8fccf94ba985f5635e [formerly b83a2de6490a015f846f2520e144cadb31d0ada8]]]]]
Former-commit-id: a2826816d73792e6c118fb6cb32d42b012c880f2
Former-commit-id: 0cad1d4c1ba6a01fa3c3b8a90d5533c380da0826
Former-commit-id: 7eda0c62f58a431184795a8626ec2a506457eab7 [formerly e0aecaf0eec076793c7cfd20789d217bca90cb14]
Former-commit-id: 03ed98ff5dfe17fcc26275ad0105077344323770
Former-commit-id: 515510c4bdaaa0592ad6993b4601784d3fb089ce
Former-commit-id: 455363e4bd1334b3c34ed0f895e39cecba10d122
Former-commit-id: 287482de32aa36267a27d7a651dec19f438b7299
Former-commit-id: f8ae31fb7f470829b98c17bd0b89b1ff09032ae6
---
 src/pages/demo/d2-crud/demo31/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/demo/d2-crud/demo31/index.vue b/src/pages/demo/d2-crud/demo31/index.vue
index 9420620f..c0dd178d 100644
--- a/src/pages/demo/d2-crud/demo31/index.vue
+++ b/src/pages/demo/d2-crud/demo31/index.vue
@@ -25,7 +25,6 @@
 <script>
 import doc from './doc.md'
 import code from './code.js'
-import { BusinessTable1List } from '@api/demo.business.table.1'
 
 export default {
   data () {

From f6364d5ad29bb7fa31ee1e58b22f203e284d62f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Thu, 27 Dec 2018 14:41:34 +0800
Subject: [PATCH 19/19] no message

Former-commit-id: 7ce375718f6b6a52ba3b90e15a389d9ced1597a9 [formerly 7ce375718f6b6a52ba3b90e15a389d9ced1597a9 [formerly 7ce375718f6b6a52ba3b90e15a389d9ced1597a9 [formerly 7ce375718f6b6a52ba3b90e15a389d9ced1597a9 [formerly 92285e87beb9712c0268d5c130ab3ae8bcfd9593 [formerly 856d746f980a65fd8cfc9d764c1128a29fbd8054]]]]]
Former-commit-id: 3739d5838cbb3fd9a0d97e85d32e2a573f711204
Former-commit-id: de7e5fc3832463beda52d1eab4a3c57d3e32270d
Former-commit-id: 102c71b6700a141c1c9711bd66aed25357037a33 [formerly 634175bbdb390f2e913ec7bf19993fa2c7bae0db]
Former-commit-id: 54f86ec3f843fd6511ba45ae7322f31706cf7b5d
Former-commit-id: 0097807314d39d4520f2d8157cbb66c4a85929c5
Former-commit-id: f73dff68e9d1bcdf96693976e6de1f813575515e
Former-commit-id: afd15cff6b1b2cf4ae66212f99c00f1b781b541f
Former-commit-id: bc322281c6f507359b597de2bbe9b80c8f60f150
---
 package.json                            | 2 +-
 src/pages/demo/d2-crud/demo16/code.js   | 7 +++++++
 src/pages/demo/d2-crud/demo16/index.vue | 7 +++++++
 src/pages/demo/d2-crud/demo17/code.js   | 7 +++++++
 src/pages/demo/d2-crud/demo17/index.vue | 7 +++++++
 yarn.lock.REMOVED.git-id                | 2 +-
 6 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0f6fdb5f..789653e8 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@d2-projects/d2-crud": "^2.0.2",
+    "@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",
diff --git a/src/pages/demo/d2-crud/demo16/code.js b/src/pages/demo/d2-crud/demo16/code.js
index de983f48..6a1792ef 100644
--- a/src/pages/demo/d2-crud/demo16/code.js
+++ b/src/pages/demo/d2-crud/demo16/code.js
@@ -7,6 +7,7 @@ export default `<template>
       add-title="我的新增"
       :form-template="formTemplate"
       :form-options="formOptions"
+      @dialog-open="handleDialogOpen"
       @row-add="handleRowAdd"
       @dialog-cancel="handleDialogCancel">
       <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
@@ -77,6 +78,12 @@ export default {
     }
   },
   methods: {
+    handleDialogOpen ({mode}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
     // 普通的新增
     addRow () {
       this.$refs.d2Crud.showDialog({
diff --git a/src/pages/demo/d2-crud/demo16/index.vue b/src/pages/demo/d2-crud/demo16/index.vue
index 0e448aae..4c2e2819 100644
--- a/src/pages/demo/d2-crud/demo16/index.vue
+++ b/src/pages/demo/d2-crud/demo16/index.vue
@@ -8,6 +8,7 @@
       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>
@@ -93,6 +94,12 @@ export default {
     }
   },
   methods: {
+    handleDialogOpen ({mode}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
     addRow () {
       this.$refs.d2Crud.showDialog({
         mode: 'add'
diff --git a/src/pages/demo/d2-crud/demo17/code.js b/src/pages/demo/d2-crud/demo17/code.js
index c08ce9a9..a2669edb 100644
--- a/src/pages/demo/d2-crud/demo17/code.js
+++ b/src/pages/demo/d2-crud/demo17/code.js
@@ -8,6 +8,7 @@ export default `<template>
       edit-title="我的修改"
       :edit-template="editTemplate"
       :form-options="formOptions"
+      @dialog-open="handleDialogOpen"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel">
         <el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
@@ -119,6 +120,12 @@ export default {
     }
   },
   methods: {
+    handleDialogOpen ({mode, row}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
     editRowWithNewTemplate () {
       this.$refs.d2Crud.showDialog({
         mode: "edit",
diff --git a/src/pages/demo/d2-crud/demo17/index.vue b/src/pages/demo/d2-crud/demo17/index.vue
index f546d109..7fa0cad8 100644
--- a/src/pages/demo/d2-crud/demo17/index.vue
+++ b/src/pages/demo/d2-crud/demo17/index.vue
@@ -9,6 +9,7 @@
       edit-title="我的修改"
       :edit-template="editTemplate"
       :form-options="formOptions"
+      @dialog-open="handleDialogOpen"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel">
       <el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
@@ -135,6 +136,12 @@ export default {
     }
   },
   methods: {
+    handleDialogOpen ({mode, row}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
     editRowWithNewTemplate () {
       this.$refs.d2Crud.showDialog({
         mode: 'edit',
diff --git a/yarn.lock.REMOVED.git-id b/yarn.lock.REMOVED.git-id
index d1de7f9f..7c7b5986 100644
--- a/yarn.lock.REMOVED.git-id
+++ b/yarn.lock.REMOVED.git-id
@@ -1 +1 @@
-f4643ebdf5dd651b6d5e06f58d00fd84549c6cd3
\ No newline at end of file
+f087314ad07f2b4d7658559be7838c8dd75bf499
\ No newline at end of file