From afeeca7247e65c104b8b86a96b0322fb9a16e75f 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, 27 Aug 2018 13:18:06 +0800
Subject: [PATCH] =?UTF-8?q?d2-crud=20=E5=9F=BA=E7=A1=80=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: de858da799b11ddb64f8f1c70a927abf3ffe541a [formerly de858da799b11ddb64f8f1c70a927abf3ffe541a [formerly de858da799b11ddb64f8f1c70a927abf3ffe541a [formerly de858da799b11ddb64f8f1c70a927abf3ffe541a [formerly dc719910e44385130a5d15d61010d4567ac69e4d [formerly e3008d8f05e5255a733d12ed45270824b112ffb2]]]]]
Former-commit-id: 8fd75dfb370c84815e9e20e4bea39730a5b7ef63
Former-commit-id: a70d95d941b30cb2dd2111e09e2dfba4352667fd
Former-commit-id: d460cd4cfbe159a6dc21779a9c3df2ba3f74e806 [formerly cd9ca40d9b4ff3f146364e69dfe8c7d4104e6dea]
Former-commit-id: 990c9ad6ad73bb009004e47b0640dd5a49d908eb
Former-commit-id: 9af35feccd694c5eeaed4029477548504981afc8
Former-commit-id: 4c84831bbf31546a1468f5bcf377c1062370c1cc
Former-commit-id: 0fb1ef7e88759452800461cde28b25d7c1155570
Former-commit-id: f26e220278c0a9d4e939b343200d70ed75d17758
---
 docs/zh/ecosystem-d2-crud/README.md    |  2 +-
 docs/zh/ecosystem-d2-crud/api.md       |  4 +-
 docs/zh/ecosystem-d2-crud/example.md   |  5 +++
 src/menu/modules/demo-d2-crud.js       |  2 +-
 src/pages/demo/d2-crud/demo1/code.js   | 54 ++++++++++++++++++++++++++
 src/pages/demo/d2-crud/demo1/index.vue | 23 ++++++++---
 src/router/routes.js.REMOVED.git-id    |  2 +-
 7 files changed, 80 insertions(+), 12 deletions(-)
 create mode 100644 docs/zh/ecosystem-d2-crud/example.md
 create mode 100644 src/pages/demo/d2-crud/demo1/code.js

diff --git a/docs/zh/ecosystem-d2-crud/README.md b/docs/zh/ecosystem-d2-crud/README.md
index daf1527d..9dcab931 100644
--- a/docs/zh/ecosystem-d2-crud/README.md
+++ b/docs/zh/ecosystem-d2-crud/README.md
@@ -31,4 +31,4 @@ new Vue({
 })
 ```
 
-之后就可以在项目中使用`D2-Crud`了，具体使用方法请参考 [使用指南](./api.md)
+之后就可以在项目中使用`D2-Crud`了。具体使用方法请参考 [示例](./example.md)
diff --git a/docs/zh/ecosystem-d2-crud/api.md b/docs/zh/ecosystem-d2-crud/api.md
index a97ef9a7..59327929 100644
--- a/docs/zh/ecosystem-d2-crud/api.md
+++ b/docs/zh/ecosystem-d2-crud/api.md
@@ -1,3 +1 @@
-# 使用指南
-
-## 基础表格
+# API
diff --git a/docs/zh/ecosystem-d2-crud/example.md b/docs/zh/ecosystem-d2-crud/example.md
new file mode 100644
index 00000000..a0bad423
--- /dev/null
+++ b/docs/zh/ecosystem-d2-crud/example.md
@@ -0,0 +1,5 @@
+# 示例
+
+| 示例 | 代码与演示 |
+| --- | --- |
+| 基础表格 | [点我查看](https://fairyever.gitee.io//d2-admin-preview/#/demo/d2-crud/demo1) |
diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index 8da7f9ad..42675a0c 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -4,6 +4,6 @@ export default {
   icon: 'table',
   children: (pre => [
     { path: `${pre}index`, title: 'D2 CRUD 首页', icon: 'home' },
-    { path: `${pre}demo1`, title: '基本表格' }
+    { path: `${pre}demo1`, title: '基础表格' }
   ])('/demo/d2-crud/')
 }
diff --git a/src/pages/demo/d2-crud/demo1/code.js b/src/pages/demo/d2-crud/demo1/code.js
new file mode 100644
index 00000000..9302b8fd
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo1/code.js
@@ -0,0 +1,54 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      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/demo1/index.vue b/src/pages/demo/d2-crud/demo1/index.vue
index 52a07b4b..d2bde819 100644
--- a/src/pages/demo/d2-crud/demo1/index.vue
+++ b/src/pages/demo/d2-crud/demo1/index.vue
@@ -1,11 +1,17 @@
 <template>
   <d2-container>
-    <template slot="header">基本表格</template>
+    <template slot="header">基础表格</template>
     <d2-crud
       :columns="columns"
-      :data="data"
-    >
-    </d2-crud>
+      :data="data"/>
+    <el-card shadow="never" class="d2-mb">
+      <p>
+        在d2-crud元素中注入columns和data对象数组，即可创建一个最基础的表格，可以在columns对象中传入width属性来控制列宽。代码如下：
+      </p>
+    </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>
@@ -13,17 +19,22 @@
 </template>
 
 <script>
+import code from './code.js'
+
 export default {
   data () {
     return {
+      code,
       columns: [
         {
           title: '日期',
-          key: 'date'
+          key: 'date',
+          width: '180'
         },
         {
           title: '姓名',
-          key: 'name'
+          key: 'name',
+          width: '180'
         },
         {
           title: '地址',
diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id
index 10a82f8f..96fc0682 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-6c0089557b3f47ce1383b439360cea062285b4b9
\ No newline at end of file
+32a7ea0783b0602f53515540de1e323f60edd792
\ No newline at end of file