From 703d9534ac39f3173ea6e605088e744df6d18101 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, 28 Aug 2018 16:39:04 +0800
Subject: [PATCH] =?UTF-8?q?d2-crud=20=E8=A1=A8=E6=A0=BC=E5=86=85=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: f7747e6ef428d8a01a8e5a6f4c5bc9662539fc82 [formerly f7747e6ef428d8a01a8e5a6f4c5bc9662539fc82 [formerly f7747e6ef428d8a01a8e5a6f4c5bc9662539fc82 [formerly f7747e6ef428d8a01a8e5a6f4c5bc9662539fc82 [formerly ff58f91ad82304510f1d5b16913b0ed7f12cdd98 [formerly 0e2ea611389ef66701658cb129fd92d27f0d20db]]]]]
Former-commit-id: ac2d6ae9de0027a8b7f1f4e691af5751d885c1e8
Former-commit-id: 55b536422271a93de6ced917e2806cc605176e56
Former-commit-id: baa97eb1007fde4d92c4fef24c3a333de2b04c10 [formerly 96304aee1d9a8bbbf7a6782f900ea2c8a692a644]
Former-commit-id: 837df4c5d2d341e6e5660e5bf583697b0af8bf90
Former-commit-id: 541ae5bf81db67f04066cd27c58c140b99f9c551
Former-commit-id: 4f419eb510460934b625ecc1e308bd3f695d1205
Former-commit-id: 29bc000faf4bf215df6c1768c93f24cf3d36f0ac
Former-commit-id: eef337fa269cf96f66e7774021123324305de75a
---
 src/menu/modules/demo-d2-crud.js        |  3 +-
 src/pages/demo/d2-crud/demo23/code.js   | 78 +++++++++++++++++++++
 src/pages/demo/d2-crud/demo23/doc.md    |  1 +
 src/pages/demo/d2-crud/demo23/index.vue | 93 +++++++++++++++++++++++++
 src/router/routes.js.REMOVED.git-id     |  2 +-
 5 files changed, 175 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/demo/d2-crud/demo23/code.js
 create mode 100644 src/pages/demo/d2-crud/demo23/doc.md
 create mode 100644 src/pages/demo/d2-crud/demo23/index.vue

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