From 135c1360e0c2fb286474d6597f97ea4e991d176f 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 15:48:13 +0800
Subject: [PATCH] =?UTF-8?q?d2-crud=20=E5=A4=9A=E7=BA=A7=E8=A1=A8=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 075bb98e3a8025983593f2643baa7cb279979010 [formerly 075bb98e3a8025983593f2643baa7cb279979010 [formerly 075bb98e3a8025983593f2643baa7cb279979010 [formerly 075bb98e3a8025983593f2643baa7cb279979010 [formerly 6f98a5af744930b23290a07491100e94b7106eb1 [formerly bf17e0ffe3ee74418b9520d24756a31a8f77e5e8]]]]]
Former-commit-id: b1af95303057610e6c16551bff28cf4f80636713
Former-commit-id: c27e8e4e083b5e215901c02542db13c7b4f26ea0
Former-commit-id: 6b043daac144ba22b0edbb97f38c0e33eb0c0f71 [formerly 1ffb5790ae8c849a87e97cdf37acc899871616a4]
Former-commit-id: 36ffdaa250b6222fdf7660b535c7f03049b90bec
Former-commit-id: 52229a4b93280c5a058027a334b4d3ae66bad4eb
Former-commit-id: e5409c0be931f296255904ab59aeb9fb7be94cac
Former-commit-id: 2cb13f7e424933417bda248282335dfe81116a59
Former-commit-id: e6446076b0919738fae215a09eb64ffd3ebdfc4a
---
 docs/zh/ecosystem-d2-crud/example.md   |   2 +
 src/menu/modules/demo-d2-crud.js       |   3 +-
 src/pages/demo/d2-crud/demo8/code.js   | 106 ++++++++++++++++++++
 src/pages/demo/d2-crud/demo8/doc.md    |   1 +
 src/pages/demo/d2-crud/demo8/index.vue | 131 +++++++++++++++++++++++++
 src/router/routes.js.REMOVED.git-id    |   2 +-
 6 files changed, 243 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/demo/d2-crud/demo8/code.js
 create mode 100644 src/pages/demo/d2-crud/demo8/doc.md
 create mode 100644 src/pages/demo/d2-crud/demo8/index.vue

diff --git a/docs/zh/ecosystem-d2-crud/example.md b/docs/zh/ecosystem-d2-crud/example.md
index 3e0e55de..e06d38fa 100644
--- a/docs/zh/ecosystem-d2-crud/example.md
+++ b/docs/zh/ecosystem-d2-crud/example.md
@@ -8,3 +8,5 @@
 | 带状态表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo4) |
 | 固定表头 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo5) |
 | 固定列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo6) |
+| 流体高度 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo7) |
+| 多级表头 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo8) |
diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index 9a392617..1c8c4fc1 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -10,6 +10,7 @@ export default {
     { path: `${pre}demo4`, title: '带状态表格' },
     { path: `${pre}demo5`, title: '固定表头' },
     { path: `${pre}demo6`, title: '固定列' },
-    { path: `${pre}demo7`, title: '流体高度' }
+    { path: `${pre}demo7`, title: '流体高度' },
+    { path: `${pre}demo8`, title: '多级表头' }
   ])('/demo/d2-crud/')
 }
diff --git a/src/pages/demo/d2-crud/demo8/code.js b/src/pages/demo/d2-crud/demo8/code.js
new file mode 100644
index 00000000..aa3d63da
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo8/code.js
@@ -0,0 +1,106 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '配送信息',
+          children: [
+            {
+              title: '姓名',
+              key: 'name'
+            },
+            {
+              title: '地址',
+              children: [
+                {
+                  title: '省份',
+                  key: 'province'
+                },
+                {
+                  title: '市区',
+                  key: 'city'
+                },
+                {
+                  title: '地址',
+                  key: 'address'
+                }
+              ]
+            },
+          ]
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }
+      ]
+    }
+  }
+}
+</script>`
diff --git a/src/pages/demo/d2-crud/demo8/doc.md b/src/pages/demo/d2-crud/demo8/doc.md
new file mode 100644
index 00000000..e7f46d62
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo8/doc.md
@@ -0,0 +1 @@
+数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：
\ No newline at end of file
diff --git a/src/pages/demo/d2-crud/demo8/index.vue b/src/pages/demo/d2-crud/demo8/index.vue
new file mode 100644
index 00000000..4acd007f
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo8/index.vue
@@ -0,0 +1,131 @@
+<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'
+        },
+        {
+          title: '配送信息',
+          children: [
+            {
+              title: '姓名',
+              key: 'name'
+            },
+            {
+              title: '地址',
+              children: [
+                {
+                  title: '省份',
+                  key: 'province'
+                },
+                {
+                  title: '市区',
+                  key: 'city'
+                },
+                {
+                  title: '地址',
+                  key: 'address'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        },
+        {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+</style>
diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id
index 77481676..e3ebee15 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-be070eaabb8ab1511f21970333d6d65ecf391e10
\ No newline at end of file
+1b0ae5476017971f2818adc72e8f78713e1a64f7
\ No newline at end of file