diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index 076c58ab..6cdb0068 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -33,7 +33,8 @@ export default {
         { path: `${pre}demo19`, title: '自定义操作列' },
         { path: `${pre}demo20`, title: '表单组件渲染' },
         { path: `${pre}demo21`, title: '表单布局' },
-        { path: `${pre}demo22`, title: '表单校验' }
+        { path: `${pre}demo22`, title: '表单校验' },
+        { path: `${pre}demo23`, title: '表格内编辑' }
       ]
     }
   ])('/demo/d2-crud/')
diff --git a/src/pages/demo/d2-crud/demo23/code.js b/src/pages/demo/d2-crud/demo23/code.js
new file mode 100644
index 00000000..b652cf79
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo23/code.js
@@ -0,0 +1,78 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          component: {
+            name: 'el-date-picker',
+            size: 'small'
+          }
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          component: {
+            name: 'el-select',
+            options: [
+              {
+                value: '王小虎',
+                label: '王小虎'
+              },
+              {
+                value: '王中虎',
+                label: '王中虎'
+              },
+              {
+                value: '王老虎',
+                label: '王老虎'
+              }
+            ],
+            size: 'small'
+          }
+        },
+        {
+          title: '地址',
+          key: 'address',
+          component: {
+            name: 'el-input',
+            size: 'small'
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  }
+}
+</script>`
diff --git a/src/pages/demo/d2-crud/demo23/doc.md b/src/pages/demo/d2-crud/demo23/doc.md
new file mode 100644
index 00000000..9199de3b
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo23/doc.md
@@ -0,0 +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)。代码如下：
diff --git a/src/pages/demo/d2-crud/demo23/index.vue b/src/pages/demo/d2-crud/demo23/index.vue
new file mode 100644
index 00000000..a120a702
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo23/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <d2-container>
+    <template slot="header">表格内编辑</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+    <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="D2 CRUD" link="https://github.com/d2-projects/d2-crud"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          component: {
+            name: 'el-date-picker',
+            size: 'small'
+          }
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          component: {
+            name: 'el-select',
+            options: [
+              {
+                value: '王小虎',
+                label: '王小虎'
+              },
+              {
+                value: '王中虎',
+                label: '王中虎'
+              },
+              {
+                value: '王老虎',
+                label: '王老虎'
+              }
+            ],
+            size: 'small'
+          }
+        },
+        {
+          title: '地址',
+          key: 'address',
+          component: {
+            name: 'el-input',
+            size: 'small'
+          }
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id
index ba891c72..30c09824 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-3d1d121640f8087d1c367b04ed44af689d45b9fc
\ No newline at end of file
+f5ad92d6dec7e541030e26da35a3cb2dd5cb620f
\ No newline at end of file