d2-crud 表格内编辑

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

@@ -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/')

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>`

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)。代码如下：

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>

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-3d1d121640f8087d1c367b04ed44af689d45b9fc
+f5ad92d6dec7e541030e26da35a3cb2dd5cb620f