Merge branch 'feature/crud' into develop

Former-commit-id: 74311ae7b519c5342211d3d4b20c6f29bdf65d72 [formerly 74311ae7b519c5342211d3d4b20c6f29bdf65d72 [formerly 74311ae7b519c5342211d3d4b20c6f29bdf65d72 [formerly 74311ae7b519c5342211d3d4b20c6f29bdf65d72 [formerly c2620a5cec94c6d6ec4638f6ab583e79f2a6de21 [formerly 5ad851a613715cbfcd52dc7f7d9f1875214c3a04]]]]] Former-commit-id: 0c7cd0117da1735f67541df778a0e0929816ccfe Former-commit-id: bcd7df2f8b33c80bd7ff3887390eee7e37dd3b83 Former-commit-id: ab32671a3fded8ce612c9f5c1581d14e92b63220 [formerly dcd4a851af25211b09b0a39832c4c943f33c7718] Former-commit-id: 1d3fa574591ace273c9e282ae6fa3a72ba629f18 Former-commit-id: 5fb1af588688e9d72ed47abf8bac5df360c4882d Former-commit-id: be2b0e713d9744ae9e6bb5a3d42818f8c7ad804d Former-commit-id: 6d8fe557a9a2810b64ac2693c2e44551fd1df5bb Former-commit-id: 0a68cd8f691de5a1bfba301ec53a16c8b08c2e34
2018-08-28 19:21:36 +08:00
parent 133cb91682 9286f9b21a
commit 273a3a4026
98 changed files with 4479 additions and 70 deletions
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -216,7 +216,8 @@ function sideBarEcosystemD2Crud () {
      collapsable: false,
      children: [
        '',
-        'api'
+        'api',
+        'example'
      ]
    }
  ]
--- a/docs/zh/ecosystem-d2-crud/README.md
+++ b/docs/zh/ecosystem-d2-crud/README.md
@@ -1,3 +1,34 @@
 # D2 CRUD

-介绍内容
+## 介绍
+`D2-Crud`是一套基于[Vue.js 2.2.0+](https://cn.vuejs.org/)和[Element 2.0.0+](http://element-cn.eleme.io/#/zh-CN)的表格组件，可根据配置的json文件自动生成表格，并实现了表格内的增删改查、新增和修改数据校验、表格内编辑等功能。
+
+## 安装
+使用npm
+``` bash
+npm i element-ui @d2-projects/d2-crud -S
+```
+
+使用yarn
+``` bash
+yarn add element-ui @d2-projects/d2-crud
+```
+
+## 使用
+在`main.js`中写入以下内容：
+``` js
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import D2Crud from '@d2-projects/d2-crud'
+
+Vue.use(ElementUI)
+Vue.use(D2Crud)
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
+```
+
+之后就可以在项目中使用`D2-Crud`了。具体使用方法请查看 [API](./api.md) 和 [表格实例](./example.md)
--- a/docs/zh/ecosystem-d2-crud/api.md
+++ b/docs/zh/ecosystem-d2-crud/api.md
@@ -1,9 +1 @@
-# api
-
-## api-1
-
-hhh
-
-## api-2
-
-## api-3
+# API
--- a/docs/zh/ecosystem-d2-crud/example.md
+++ b/docs/zh/ecosystem-d2-crud/example.md
@@ -0,0 +1,34 @@
+# 示例
+
+## 基础功能
+
+| 示例 | 代码与演示 |
+| --- | --- |
+| 基础表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo1) |
+| 带斑马纹表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo2) |
+| 带边框表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo3) |
+| 带状态表格 | [点我查看](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) |
+| 单选 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo9) |
+| 多选 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo10) |
+| 排序 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo11) |
+| 筛选 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo12) |
+| 表尾合计行 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo13) |
+| 合并行 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo14) |
+| 合并列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo15) |
+
+## 数据操作
+
+| 示例 | 代码与演示 |
+| --- | --- |
+| 新增数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo16) |
+| 修改数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo17) |
+| 删除数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo18) |
+| 自定义操作列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo19) |
+| 表单组件渲染 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo20) |
+| 表单布局 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo21) |
+| 表单校验 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo22) |
+| 表格内编辑 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo23) |
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "doc:build": "vuepress build docs"
  },
  "dependencies": {
+    "@d2-projects/d2-crud": "^1.0.2",
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "better-scroll": "^1.12.1",
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-bfee5e91a3b150e04d9f24695061f6f3e7c59342
+5e28075542c22533bf13f61de9a2eaf52bf18157
--- a/src/assets/svg-icons/icons/add.svg
+++ b/src/assets/svg-icons/icons/add.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M682.7 554.7H341.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h341.3c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.6 42.7z" fill="#5F6379" /><path d="M512 725.3c-23.6 0-42.7-19.1-42.7-42.7V341.3c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v341.3c0 23.6-19.1 42.7-42.7 42.7z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M682.7 554.7H341.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h341.3c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.6 42.7z" fill="#5F6379" /><path d="M512 725.3c-23.6 0-42.7-19.1-42.7-42.7V341.3c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v341.3c0 23.6-19.1 42.7-42.7 42.7z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/alarm.svg
+++ b/src/assets/svg-icons/icons/alarm.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 896c-223.5 0-405.3-181.8-405.3-405.3S288.5 85.3 512 85.3s405.3 181.8 405.3 405.3S735.5 896 512 896z m0-725.3c-176.4 0-320 143.5-320 320s143.6 320 320 320 320-143.5 320-320-143.6-320-320-320z" fill="#3688FF" /><path d="M922.6 249.6c-13.7 0-27.1-6.6-35.4-18.8-15.3-22.6-32.8-43.9-52.1-63.2-19.3-19.3-40.6-36.9-63.2-52.1-19.5-13.2-24.6-39.7-11.5-59.2 13.2-19.5 39.7-24.6 59.2-11.5 27.1 18.3 52.6 39.4 75.7 62.5s44.2 48.6 62.5 75.7c13.2 19.5 8.1 46.1-11.5 59.2-7.2 5-15.5 7.4-23.7 7.4zM101.4 249.6c-8.2 0-16.5-2.4-23.8-7.3-19.5-13.2-24.7-39.7-11.5-59.2 18.3-27.1 39.4-52.6 62.5-75.7s48.6-44.1 75.7-62.5c19.5-13.2 46.1-8 59.3 11.5 13.2 19.5 8.1 46-11.5 59.2-22.6 15.3-43.9 32.8-63.2 52.1-19.3 19.3-36.8 40.5-52.1 63.2-8.2 12.1-21.7 18.7-35.4 18.7zM138.6 970.7c-8.6 0-17.3-2.6-24.8-7.9-19.2-13.7-23.6-40.4-9.9-59.5l53.3-74.7c13.7-19.2 40.3-23.6 59.5-9.9 19.2 13.7 23.6 40.4 9.9 59.5l-53.3 74.7c-8.2 11.6-21.4 17.8-34.7 17.8zM885.4 970.7c-13.3 0-26.4-6.2-34.8-17.9l-53.3-74.7c-13.7-19.2-9.3-45.8 9.9-59.5 19.2-13.7 45.8-9.2 59.5 9.9l53.3 74.7c13.7 19.2 9.3 45.8-9.9 59.5-7.5 5.4-16.2 8-24.7 8zM512 554.7c-7.2 0-14.5-1.8-21-5.5-13.4-7.6-21.6-21.8-21.6-37.1V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v52.6l42.1-25.2c20.2-12.1 46.4-5.6 58.5 14.6 12.1 20.2 5.6 46.4-14.6 58.5l-106.7 64c-6.9 4.1-14.5 6.2-22.1 6.2z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 896c-223.5 0-405.3-181.8-405.3-405.3S288.5 85.3 512 85.3s405.3 181.8 405.3 405.3S735.5 896 512 896z m0-725.3c-176.4 0-320 143.5-320 320s143.6 320 320 320 320-143.5 320-320-143.6-320-320-320z" fill="#3688FF" /><path d="M922.6 249.6c-13.7 0-27.1-6.6-35.4-18.8-15.3-22.6-32.8-43.9-52.1-63.2-19.3-19.3-40.6-36.9-63.2-52.1-19.5-13.2-24.6-39.7-11.5-59.2 13.2-19.5 39.7-24.6 59.2-11.5 27.1 18.3 52.6 39.4 75.7 62.5s44.2 48.6 62.5 75.7c13.2 19.5 8.1 46.1-11.5 59.2-7.2 5-15.5 7.4-23.7 7.4zM101.4 249.6c-8.2 0-16.5-2.4-23.8-7.3-19.5-13.2-24.7-39.7-11.5-59.2 18.3-27.1 39.4-52.6 62.5-75.7s48.6-44.1 75.7-62.5c19.5-13.2 46.1-8 59.3 11.5 13.2 19.5 8.1 46-11.5 59.2-22.6 15.3-43.9 32.8-63.2 52.1-19.3 19.3-36.8 40.5-52.1 63.2-8.2 12.1-21.7 18.7-35.4 18.7zM138.6 970.7c-8.6 0-17.3-2.6-24.8-7.9-19.2-13.7-23.6-40.4-9.9-59.5l53.3-74.7c13.7-19.2 40.3-23.6 59.5-9.9 19.2 13.7 23.6 40.4 9.9 59.5l-53.3 74.7c-8.2 11.6-21.4 17.8-34.7 17.8zM885.4 970.7c-13.3 0-26.4-6.2-34.8-17.9l-53.3-74.7c-13.7-19.2-9.3-45.8 9.9-59.5 19.2-13.7 45.8-9.2 59.5 9.9l53.3 74.7c13.7 19.2 9.3 45.8-9.9 59.5-7.5 5.4-16.2 8-24.7 8zM512 554.7c-7.2 0-14.5-1.8-21-5.5-13.4-7.6-21.6-21.8-21.6-37.1V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v52.6l42.1-25.2c20.2-12.1 46.4-5.6 58.5 14.6 12.1 20.2 5.6 46.4-14.6 58.5l-106.7 64c-6.9 4.1-14.5 6.2-22.1 6.2z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/camera.svg
+++ b/src/assets/svg-icons/icons/camera.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M899.9 938.7H124.1C55.7 938.7 0 883 0 814.6V273.4C0 205 55.7 149.3 124.1 149.3h68.7l85.3-106.7h467.7l85.3 106.7h68.7c68.4 0 124.1 55.7 124.1 124.1v541.1c0.1 68.5-55.6 124.2-124 124.2z m-775.8-704c-21.4 0-38.8 17.4-38.8 38.8v541.1c0 21.4 17.4 38.8 38.8 38.8h775.8c21.4 0 38.8-17.4 38.8-38.8V273.4c0-21.4-17.4-38.8-38.8-38.8H790.2L704.8 128H319.2l-85.3 106.7H124.1z" fill="#3688FF" /><path d="M512 768c-117.6 0-213.3-95.7-213.3-213.3S394.4 341.3 512 341.3 725.3 437 725.3 554.7 629.6 768 512 768z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M810.7 341.3m-42.7 0a42.7 42.7 0 1 0 85.4 0 42.7 42.7 0 1 0-85.4 0Z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M899.9 938.7H124.1C55.7 938.7 0 883 0 814.6V273.4C0 205 55.7 149.3 124.1 149.3h68.7l85.3-106.7h467.7l85.3 106.7h68.7c68.4 0 124.1 55.7 124.1 124.1v541.1c0.1 68.5-55.6 124.2-124 124.2z m-775.8-704c-21.4 0-38.8 17.4-38.8 38.8v541.1c0 21.4 17.4 38.8 38.8 38.8h775.8c21.4 0 38.8-17.4 38.8-38.8V273.4c0-21.4-17.4-38.8-38.8-38.8H790.2L704.8 128H319.2l-85.3 106.7H124.1z" fill="#3688FF" /><path d="M512 768c-117.6 0-213.3-95.7-213.3-213.3S394.4 341.3 512 341.3 725.3 437 725.3 554.7 629.6 768 512 768z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M810.7 341.3m-42.7 0a42.7 42.7 0 1 0 85.4 0 42.7 42.7 0 1 0-85.4 0Z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/d2-admin.svg
+++ b/src/assets/svg-icons/icons/d2-admin.svg
@@ -1,5 +1,5 @@

-<svg width="60px" height="54px" viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>D2Admin</desc>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
--- a/src/assets/svg-icons/icons/d2-crud.svg
+++ b/src/assets/svg-icons/icons/d2-crud.svg
@@ -0,0 +1,26 @@
+
+<svg viewBox="0 0 256 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/500/crud" transform="translate(-122.000000, -132.000000)" fill-rule="nonzero">
+            <g id="table-(1)" transform="translate(122.000000, 132.000000)">
+                <path d="M192,132.24 L192,166.906667 C192,169.115806 190.209139,170.906667 188,170.906667 L153.333333,170.906667 C151.124194,170.906667 149.333333,169.115806 149.333333,166.906667 L149.333333,132.24 C149.333333,130.030861 151.124194,128.24 153.333333,128.24 L188,128.24 C190.209139,128.24 192,130.030861 192,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M128,132.24 L128,166.906667 C128,169.115806 126.209139,170.906667 124,170.906667 L89.3333333,170.906667 C87.1241943,170.906667 85.3333333,169.115806 85.3333333,166.906667 L85.3333333,132.24 C85.3333333,130.030861 87.1241943,128.24 89.3333333,128.24 L124,128.24 C126.209139,128.24 128,130.030861 128,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,132.24 L64,166.906667 C64,169.115806 62.209139,170.906667 60,170.906667 L4,170.906667 C1.790861,170.906667 2.705415e-16,169.115806 0,166.906667 L0,132.24 C-2.705415e-16,130.030861 1.790861,128.24 4,128.24 L60,128.24 C62.209139,128.24 64,130.030861 64,132.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M128,69.0933333 L128,103.76 C128,105.969139 126.209139,107.76 124,107.76 L89.3333333,107.76 C87.1241943,107.76 85.3333333,105.969139 85.3333333,103.76 L85.3333333,69.0933333 C85.3333333,66.8841943 87.1241943,65.0933333 89.3333333,65.0933333 L124,65.0933333 C126.209139,65.0933333 128,66.8841943 128,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,4.24 L64,38.9066667 C64,41.1158057 62.209139,42.9066667 60,42.9066667 L4,42.9066667 C1.790861,42.9066667 2.705415e-16,41.1158057 0,38.9066667 L0,4.24 C-2.705415e-16,2.030861 1.790861,0.24 4,0.24 L60,0.24 C62.209139,0.24 64,2.030861 64,4.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M192,69.0933333 L192,103.76 C192,105.969139 190.209139,107.76 188,107.76 L153.333333,107.76 C151.124194,107.76 149.333333,105.969139 149.333333,103.76 L149.333333,69.0933333 C149.333333,66.8841943 151.124194,65.0933333 153.333333,65.0933333 L188,65.0933333 C190.209139,65.0933333 192,66.8841943 192,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,69.0933333 L64,103.76 C64,105.969139 62.209139,107.76 60,107.76 L4,107.76 C1.790861,107.76 2.705415e-16,105.969139 0,103.76 L0,69.0933333 C-2.705415e-16,66.8841943 1.790861,65.0933333 4,65.0933333 L60,65.0933333 C62.209139,65.0933333 64,66.8841943 64,69.0933333 Z" id="Shape" fill="#35495E"></path>
+                <path d="M256,132.24 L256,166.906667 C256,169.115806 254.209139,170.906667 252,170.906667 L217.333333,170.906667 C215.124194,170.906667 213.333333,169.115806 213.333333,166.906667 L213.333333,132.24 C213.333333,130.030861 215.124194,128.24 217.333333,128.24 L252,128.24 C254.209139,128.24 256,130.030861 256,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M256,69.0933333 L256,103.76 C256,105.969139 254.209139,107.76 252,107.76 L217.333333,107.76 C215.124194,107.76 213.333333,105.969139 213.333333,103.76 L213.333333,69.0933333 C213.333333,66.8841943 215.124194,65.0933333 217.333333,65.0933333 L252,65.0933333 C254.209139,65.0933333 256,66.8841943 256,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M256,4.24 L256,38.9066667 C256,41.1158057 254.209139,42.9066667 252,42.9066667 L89.3333333,42.9066667 C87.1241943,42.9066667 85.3333333,41.1158057 85.3333333,38.9066667 L85.3333333,4.24 C85.3333333,2.030861 87.1241943,0.24 89.3333333,0.24 L252,0.24 C254.209139,0.24 256,2.030861 256,4.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M128,197.093333 L128,231.76 C128,233.969139 126.209139,235.76 124,235.76 L89.3333333,235.76 C87.1241943,235.76 85.3333333,233.969139 85.3333333,231.76 L85.3333333,197.093333 C85.3333333,194.884194 87.1241943,193.093333 89.3333333,193.093333 L124,193.093333 C126.209139,193.093333 128,194.884194 128,197.093333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,197.093333 L64,231.76 C64,233.969139 62.209139,235.76 60,235.76 L4,235.76 C1.790861,235.76 2.705415e-16,233.969139 0,231.76 L0,197.093333 C-2.705415e-16,194.884194 1.790861,193.093333 4,193.093333 L60,193.093333 C62.209139,193.093333 64,194.884194 64,197.093333 Z" id="Shape" fill="#35495E"></path>
+                <path d="M256,197.093333 L256,231.76 C256,233.969139 254.209139,235.76 252,235.76 L217.333333,235.76 C215.124194,235.76 213.333333,233.969139 213.333333,231.76 L213.333333,197.093333 C213.333333,194.884194 215.124194,193.093333 217.333333,193.093333 L252,193.093333 C254.209139,193.093333 256,194.884194 256,197.093333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M192,197.093333 L192,231.76 C192,233.969139 190.209139,235.76 188,235.76 L153.333333,235.76 C151.124194,235.76 149.333333,233.969139 149.333333,231.76 L149.333333,197.093333 C149.333333,194.884194 151.124194,193.093333 153.333333,193.093333 L188,193.093333 C190.209139,193.093333 192,194.884194 192,197.093333 Z" id="Shape" fill="#409EFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/assets/svg-icons/icons/history.svg
+++ b/src/assets/svg-icons/icons/history.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M640 682.7c-9.6 0-19.3-3.2-27.3-9.9l-128-106.7c-9.7-8.1-15.4-20.1-15.4-32.8V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v129.4l112.6 93.9c18.1 15.1 20.5 42 5.5 60.1-8.5 10-20.6 15.3-32.8 15.3z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M640 682.7c-9.6 0-19.3-3.2-27.3-9.9l-128-106.7c-9.7-8.1-15.4-20.1-15.4-32.8V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v129.4l112.6 93.9c18.1 15.1 20.5 42 5.5 60.1-8.5 10-20.6 15.3-32.8 15.3z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/like.svg
+++ b/src/assets/svg-icons/icons/like.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192 938.7H87.9c-48.4 0-87.9-39.5-87.9-88V386.6c0-48.5 39.5-87.9 87.9-87.9h125.4c11.6 0 22.7 4.7 30.8 13.1 8 8.4 12.3 19.6 11.9 31.2l-21.3 554.7c-0.9 22.8-19.8 41-42.7 41zM87.9 384c-1.4 0-2.6 1.2-2.6 2.6v464.1c0 1.4 1.2 2.6 2.6 2.6h63L169 384H87.9z" fill="#5F6379" /><path d="M810.4 938.7H275.7l24.6-640H418l72-201.8C510.7 38.9 566 0 627.5 0c42.4 0 82.6 18.4 110.3 50.4S778 124.8 772 166.7l-18.9 132h142.6c70.7 0 128.2 57.5 128.2 128.2l-1 9.3-84.4 379.4c-2.6 68.3-59.1 123.1-128.1 123.1z m-446.1-85.4h446.1c23.6 0 42.9-19.2 42.9-42.9l1-9.3L938.5 423c-2-21.8-20.4-39-42.7-39h-241l32.8-229.4c2.5-17.7-2.5-34.8-14.2-48.3s-28-20.9-45.9-20.9c-25.6 0-48.5 16.2-57.1 40.3L478.1 384h-95.7l-18.1 469.3z" fill="#3688FF" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192 938.7H87.9c-48.4 0-87.9-39.5-87.9-88V386.6c0-48.5 39.5-87.9 87.9-87.9h125.4c11.6 0 22.7 4.7 30.8 13.1 8 8.4 12.3 19.6 11.9 31.2l-21.3 554.7c-0.9 22.8-19.8 41-42.7 41zM87.9 384c-1.4 0-2.6 1.2-2.6 2.6v464.1c0 1.4 1.2 2.6 2.6 2.6h63L169 384H87.9z" fill="#5F6379" /><path d="M810.4 938.7H275.7l24.6-640H418l72-201.8C510.7 38.9 566 0 627.5 0c42.4 0 82.6 18.4 110.3 50.4S778 124.8 772 166.7l-18.9 132h142.6c70.7 0 128.2 57.5 128.2 128.2l-1 9.3-84.4 379.4c-2.6 68.3-59.1 123.1-128.1 123.1z m-446.1-85.4h446.1c23.6 0 42.9-19.2 42.9-42.9l1-9.3L938.5 423c-2-21.8-20.4-39-42.7-39h-241l32.8-229.4c2.5-17.7-2.5-34.8-14.2-48.3s-28-20.9-45.9-20.9c-25.6 0-48.5 16.2-57.1 40.3L478.1 384h-95.7l-18.1 469.3z" fill="#3688FF" /></svg>
--- a/src/assets/svg-icons/icons/love.svg
+++ b/src/assets/svg-icons/icons/love.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="199.80px" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512.8 977.4c-26.1 0-50.1-7.3-71.5-21.7C323.5 897 0 675.3 0 400.5 0 212 153.4 58.6 341.9 58.6c60.5 0 119 15.8 170.9 45.9 51.9-30.1 110.5-45.9 170.9-45.9 188.5 0 341.9 153.4 341.9 341.9 0 274.8-323.5 496.6-441.3 555.2-21.4 14.4-45.4 21.7-71.5 21.7zM341.9 144.1c-141.4 0-256.4 115-256.4 256.4 0 117.2 80.6 225.2 148.2 295.1 86.1 89 187.5 155.2 248.1 184.8l6.1 3.7c15.1 10.8 34.6 10.8 49.7 0l6.1-3.7C604.4 850.7 705.8 784.6 791.8 695.6c67.6-69.9 148.2-177.8 148.2-295.1 0-141.4-115-256.4-256.4-256.4-52.6 0-103.2 16-146.5 46.1L512.8 207.3l-24.5-17.1c-43.2-30.2-93.9-46.1-146.4-46.1z"  /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512.8 977.4c-26.1 0-50.1-7.3-71.5-21.7C323.5 897 0 675.3 0 400.5 0 212 153.4 58.6 341.9 58.6c60.5 0 119 15.8 170.9 45.9 51.9-30.1 110.5-45.9 170.9-45.9 188.5 0 341.9 153.4 341.9 341.9 0 274.8-323.5 496.6-441.3 555.2-21.4 14.4-45.4 21.7-71.5 21.7zM341.9 144.1c-141.4 0-256.4 115-256.4 256.4 0 117.2 80.6 225.2 148.2 295.1 86.1 89 187.5 155.2 248.1 184.8l6.1 3.7c15.1 10.8 34.6 10.8 49.7 0l6.1-3.7C604.4 850.7 705.8 784.6 791.8 695.6c67.6-69.9 148.2-177.8 148.2-295.1 0-141.4-115-256.4-256.4-256.4-52.6 0-103.2 16-146.5 46.1L512.8 207.3l-24.5-17.1c-43.2-30.2-93.9-46.1-146.4-46.1z"  /></svg>
--- a/src/assets/svg-icons/icons/message.svg
+++ b/src/assets/svg-icons/icons/message.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M277.3 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M344.7 978.2c-5.2 0-10.4-0.8-15.5-2.5-13.8-4.5-24.8-14.8-30.4-28.1l-39.3-94.2H128.3C57.5 853.3 0 795.8 0 725.1V213.6C0 142.9 57.5 85.3 128.3 85.3h767.5c70.7 0 128.3 57.5 128.3 128.3v511.5c0 70.7-57.5 128.3-128.3 128.3H566.5L370.2 971.1c-7.7 4.7-16.6 7.1-25.5 7.1z m-18.3-80.3s-0.1 0 0 0zM128.3 170.7c-23.7 0-42.9 19.3-42.9 42.9v511.5c0 23.7 19.3 42.9 42.9 42.9h188.2l45.3 108.7L542.9 768h352.9c23.7 0 42.9-19.3 42.9-42.9V213.6c0-23.7-19.3-42.9-42.9-42.9H128.3z" fill="#3688FF" /><path d="M512 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M746.7 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M277.3 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M344.7 978.2c-5.2 0-10.4-0.8-15.5-2.5-13.8-4.5-24.8-14.8-30.4-28.1l-39.3-94.2H128.3C57.5 853.3 0 795.8 0 725.1V213.6C0 142.9 57.5 85.3 128.3 85.3h767.5c70.7 0 128.3 57.5 128.3 128.3v511.5c0 70.7-57.5 128.3-128.3 128.3H566.5L370.2 971.1c-7.7 4.7-16.6 7.1-25.5 7.1z m-18.3-80.3s-0.1 0 0 0zM128.3 170.7c-23.7 0-42.9 19.3-42.9 42.9v511.5c0 23.7 19.3 42.9 42.9 42.9h188.2l45.3 108.7L542.9 768h352.9c23.7 0 42.9-19.3 42.9-42.9V213.6c0-23.7-19.3-42.9-42.9-42.9H128.3z" fill="#3688FF" /><path d="M512 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M746.7 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/notice.svg
+++ b/src/assets/svg-icons/icons/notice.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c-23.6 0-42.7-19.1-42.7-42.7V42.7C469.3 19.1 488.4 0 512 0s42.7 19.1 42.7 42.7v42.7c0 23.5-19.1 42.6-42.7 42.6zM512 1024c-61.8 0-122.3-10.5-179.9-31.1-22.2-7.9-33.7-32.4-25.8-54.6 8-22.2 32.3-33.8 54.6-25.8 98.4 35.3 209.2 34.6 307.1-1.8 22.1-8.2 46.6 3 54.9 25.1 8.2 22.1-3 46.6-25.1 54.9-59.5 22.1-121.9 33.3-185.8 33.3z" fill="#5F6379" /><path d="M845 874.7H179c-75.2 0-136.4-61.2-136.4-136.4v-4.6c0-57.1 34.7-106 85.3-126.1V426.7c0-211.7 172.3-384 384-384s384 172.3 384 384v180.9c50.6 20.1 85.3 69 85.3 126.1v4.6c0.1 75.2-61 136.4-136.2 136.4zM512 128c-164.7 0-298.7 134-298.7 298.7v253.2l-38.9 3.5c-26.5 2.4-46.5 24-46.5 50.3v4.6c0 28.1 22.9 51 51 51h666c28.1 0 51-22.9 51-51v-4.6c0-26.3-20-48-46.5-50.3l-38.9-3.5V426.7C810.7 262 676.7 128 512 128z" fill="#3688FF" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c-23.6 0-42.7-19.1-42.7-42.7V42.7C469.3 19.1 488.4 0 512 0s42.7 19.1 42.7 42.7v42.7c0 23.5-19.1 42.6-42.7 42.6zM512 1024c-61.8 0-122.3-10.5-179.9-31.1-22.2-7.9-33.7-32.4-25.8-54.6 8-22.2 32.3-33.8 54.6-25.8 98.4 35.3 209.2 34.6 307.1-1.8 22.1-8.2 46.6 3 54.9 25.1 8.2 22.1-3 46.6-25.1 54.9-59.5 22.1-121.9 33.3-185.8 33.3z" fill="#5F6379" /><path d="M845 874.7H179c-75.2 0-136.4-61.2-136.4-136.4v-4.6c0-57.1 34.7-106 85.3-126.1V426.7c0-211.7 172.3-384 384-384s384 172.3 384 384v180.9c50.6 20.1 85.3 69 85.3 126.1v4.6c0.1 75.2-61 136.4-136.2 136.4zM512 128c-164.7 0-298.7 134-298.7 298.7v253.2l-38.9 3.5c-26.5 2.4-46.5 24-46.5 50.3v4.6c0 28.1 22.9 51 51 51h666c28.1 0 51-22.9 51-51v-4.6c0-26.3-20-48-46.5-50.3l-38.9-3.5V426.7C810.7 262 676.7 128 512 128z" fill="#3688FF" /></svg>
--- a/src/assets/svg-icons/icons/search.svg
+++ b/src/assets/svg-icons/icons/search.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M492.5 917.7c-247 0-447.9-200.9-447.9-447.9s200.9-448 447.9-448 447.9 200.9 447.9 447.9-200.9 448-447.9 448z m0-810.6c-200 0-362.6 162.7-362.6 362.6s162.7 362.6 362.6 362.6 362.6-162.7 362.6-362.6-162.6-362.6-362.6-362.6z" fill="#3688FF" /><path d="M951.1 971c-10.9 0-21.8-4.2-30.2-12.5l-96-96c-16.7-16.7-16.7-43.7 0-60.3 16.6-16.7 43.7-16.7 60.3 0l96 96c16.7 16.7 16.7 43.7 0 60.3-8.2 8.4-19.2 12.5-30.1 12.5z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M492.5 917.7c-247 0-447.9-200.9-447.9-447.9s200.9-448 447.9-448 447.9 200.9 447.9 447.9-200.9 448-447.9 448z m0-810.6c-200 0-362.6 162.7-362.6 362.6s162.7 362.6 362.6 362.6 362.6-162.7 362.6-362.6-162.6-362.6-362.6-362.6z" fill="#3688FF" /><path d="M951.1 971c-10.9 0-21.8-4.2-30.2-12.5l-96-96c-16.7-16.7-16.7-43.7 0-60.3 16.6-16.7 43.7-16.7 60.3 0l96 96c16.7 16.7 16.7 43.7 0 60.3-8.2 8.4-19.2 12.5-30.1 12.5z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/share.svg
+++ b/src/assets/svg-icons/icons/share.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M811.3 938.7H217.5c-71.5 0-129.8-58.2-129.8-129.8V215.1c0-71.6 58.2-129.8 129.8-129.8h296.9c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.7 42.7H217.5c-24.5 0-44.4 19.9-44.4 44.4v593.8c0 24.5 19.9 44.4 44.4 44.4h593.8c24.5 0 44.4-19.9 44.4-44.4V512c0-23.6 19.1-42.7 42.7-42.7S941 488.4 941 512v296.9c0 71.6-58.2 129.8-129.7 129.8z" fill="#3688FF" /><path d="M898.4 405.3c-23.6 0-42.7-19.1-42.7-42.7V212.9c0-23.3-19-42.3-42.3-42.3H663.7c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h149.7c70.4 0 127.6 57.2 127.6 127.6v149.7c0 23.7-19.1 42.8-42.6 42.8z" fill="#5F6379" /><path d="M373.6 712.6c-10.9 0-21.8-4.2-30.2-12.5-16.7-16.7-16.7-43.7 0-60.3L851.2 132c16.7-16.7 43.7-16.7 60.3 0 16.7 16.7 16.7 43.7 0 60.3L403.8 700.1c-8.4 8.3-19.3 12.5-30.2 12.5z" fill="#5F6379" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M811.3 938.7H217.5c-71.5 0-129.8-58.2-129.8-129.8V215.1c0-71.6 58.2-129.8 129.8-129.8h296.9c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.7 42.7H217.5c-24.5 0-44.4 19.9-44.4 44.4v593.8c0 24.5 19.9 44.4 44.4 44.4h593.8c24.5 0 44.4-19.9 44.4-44.4V512c0-23.6 19.1-42.7 42.7-42.7S941 488.4 941 512v296.9c0 71.6-58.2 129.8-129.7 129.8z" fill="#3688FF" /><path d="M898.4 405.3c-23.6 0-42.7-19.1-42.7-42.7V212.9c0-23.3-19-42.3-42.3-42.3H663.7c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h149.7c70.4 0 127.6 57.2 127.6 127.6v149.7c0 23.7-19.1 42.8-42.6 42.8z" fill="#5F6379" /><path d="M373.6 712.6c-10.9 0-21.8-4.2-30.2-12.5-16.7-16.7-16.7-43.7 0-60.3L851.2 132c16.7-16.7 43.7-16.7 60.3 0 16.7 16.7 16.7 43.7 0 60.3L403.8 700.1c-8.4 8.3-19.3 12.5-30.2 12.5z" fill="#5F6379" /></svg>
--- a/src/assets/svg-icons/icons/star.svg
+++ b/src/assets/svg-icons/icons/star.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M761.2 942.8c-8.9 0-17.9-1.8-26.5-5.4l-220.7-93-220.7 93c-22.1 9.3-46.8 6.4-66.2-7.6-19.4-14.1-29.8-36.7-27.7-60.6l20.2-238.7L62.9 449.2c-15.7-18.1-20.6-42.5-13.2-65.3 7.4-22.8 25.7-39.6 49.1-45.1L332 284.3l123.9-205c12.4-20.5 34.1-32.7 58-32.7 24 0 45.7 12.2 58.1 32.7l123.9 205 233.2 54.5c23.3 5.5 41.7 22.3 49.1 45.1 7.4 22.8 2.5 47.2-13.2 65.3L808.4 630.4l20.2 238.7c2 23.9-8.3 46.5-27.7 60.6-11.8 8.6-25.7 13-39.7 13.1zM146.4 415.3L289 580.2c11.9 13.7 17.8 32 16.3 50.1l-18.4 217.2 200.8-84.6c16.8-7 35.9-7 52.6 0l200.9 84.6-18.4-217.2c-1.5-18.1 4.4-36.4 16.3-50.1l142.5-164.9-212.2-49.6c-17.7-4.1-33.2-15.4-42.6-31L514 148.3 401.2 334.8c-9.4 15.6-24.9 26.8-42.6 31l-212.2 49.5z m553.3-124.7h0.2-0.2z"  /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M761.2 942.8c-8.9 0-17.9-1.8-26.5-5.4l-220.7-93-220.7 93c-22.1 9.3-46.8 6.4-66.2-7.6-19.4-14.1-29.8-36.7-27.7-60.6l20.2-238.7L62.9 449.2c-15.7-18.1-20.6-42.5-13.2-65.3 7.4-22.8 25.7-39.6 49.1-45.1L332 284.3l123.9-205c12.4-20.5 34.1-32.7 58-32.7 24 0 45.7 12.2 58.1 32.7l123.9 205 233.2 54.5c23.3 5.5 41.7 22.3 49.1 45.1 7.4 22.8 2.5 47.2-13.2 65.3L808.4 630.4l20.2 238.7c2 23.9-8.3 46.5-27.7 60.6-11.8 8.6-25.7 13-39.7 13.1zM146.4 415.3L289 580.2c11.9 13.7 17.8 32 16.3 50.1l-18.4 217.2 200.8-84.6c16.8-7 35.9-7 52.6 0l200.9 84.6-18.4-217.2c-1.5-18.1 4.4-36.4 16.3-50.1l142.5-164.9-212.2-49.6c-17.7-4.1-33.2-15.4-42.6-31L514 148.3 401.2 334.8c-9.4 15.6-24.9 26.8-42.6 31l-212.2 49.5z m553.3-124.7h0.2-0.2z"  /></svg>
--- a/src/assets/svg-icons/icons/user.svg
+++ b/src/assets/svg-icons/icons/user.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 661.3c-117.6 0-213.3-95.7-213.3-213.3S394.4 234.7 512 234.7 725.3 330.4 725.3 448 629.6 661.3 512 661.3z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M837 862.9c-15.7 0-30.8-8.7-38.2-23.7C744.3 729.5 634.4 661.3 512 661.3s-232.3 68.1-286.8 177.9c-10.5 21.1-36.1 29.7-57.2 19.2s-29.7-36.1-19.2-57.2C217.8 662.3 357 576 512 576s294.2 86.3 363.2 225.2c10.5 21.1 1.9 46.7-19.2 57.2-6.1 3-12.6 4.5-19 4.5z" fill="#5F6379" /><path d="M512 1002.7c-270.6 0-490.7-220.1-490.7-490.7S241.4 21.3 512 21.3s490.7 220.1 490.7 490.7-220.1 490.7-490.7 490.7z m0-896c-223.5 0-405.3 181.8-405.3 405.3S288.5 917.3 512 917.3 917.3 735.5 917.3 512 735.5 106.7 512 106.7z" fill="#3688FF" /></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 661.3c-117.6 0-213.3-95.7-213.3-213.3S394.4 234.7 512 234.7 725.3 330.4 725.3 448 629.6 661.3 512 661.3z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M837 862.9c-15.7 0-30.8-8.7-38.2-23.7C744.3 729.5 634.4 661.3 512 661.3s-232.3 68.1-286.8 177.9c-10.5 21.1-36.1 29.7-57.2 19.2s-29.7-36.1-19.2-57.2C217.8 662.3 357 576 512 576s294.2 86.3 363.2 225.2c10.5 21.1 1.9 46.7-19.2 57.2-6.1 3-12.6 4.5-19 4.5z" fill="#5F6379" /><path d="M512 1002.7c-270.6 0-490.7-220.1-490.7-490.7S241.4 21.3 512 21.3s490.7 220.1 490.7 490.7-220.1 490.7-490.7 490.7z m0-896c-223.5 0-405.3 181.8-405.3 405.3S288.5 917.3 512 917.3 917.3 735.5 917.3 512 735.5 106.7 512 106.7z" fill="#3688FF" /></svg>
--- a/src/layout/header-aside/components/components/menu-item/index.vue
+++ b/src/layout/header-aside/components/components/menu-item/index.vue
@@ -1,9 +1,10 @@
 <template>
  <el-menu-item :index="menu.path || uniqueId">
    <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-    <i v-else-if="menu.iconSvg">
+    <!-- <i v-else-if="menu.iconSvg">
      <d2-icon-svg :name="menu.iconSvg"/>
-    </i>
+    </i> -->
+    <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
    <i v-else class="fa fa-file-o"></i>
    <span slot="title">{{menu.title || '未命名菜单'}}</span>
  </el-menu-item>
--- a/src/layout/header-aside/components/components/menu-sub/index.vue
+++ b/src/layout/header-aside/components/components/menu-sub/index.vue
@@ -2,9 +2,10 @@
  <el-submenu :index="menu.path || uniqueId">
    <template slot="title">
      <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-      <i v-else-if="menu.iconSvg">
+      <!-- <i v-else-if="menu.iconSvg">
        <d2-icon-svg :name="menu.iconSvg"/>
-      </i>
+      </i> -->
+      <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
      <i v-else class="fa fa-folder-o"></i>
      <span slot="title">{{menu.title}}</span>
    </template>
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,8 @@ import i18n from './i18n'
 // 核心插件
 import d2Admin from '@/plugin/d2admin'

+// [ 可选插件组件 ]D2-Crud
+import D2Crud from '@d2-projects/d2-crud'
 // [ 可选插件组件 ] 图表
 import VCharts from 'v-charts'
 // [ 可选插件组件 ] 右键菜单
@@ -33,6 +35,7 @@ import { frameInRoutes } from '@/router/routes'
 Vue.use(d2Admin)

 // 可选插件组件
+Vue.use(D2Crud)
 Vue.use(VCharts)
 Vue.use(contentmenu)
 Vue.use(vueJsonTreeView)
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -51,39 +51,6 @@ export const menuHeader = [
          { path: 'https://segmentfault.com/blog/liyang-note-book', title: 'segmentfault 专栏', icon: 'globe' },
          { path: 'http://www.fairyever.com/', title: 'www.fairyever.com', icon: 'globe' }
        ]
-      },
-      {
-        title: '空菜单演示',
-        icon: 'folder-o',
-        children: [
-          {
-            title: '正在开发 1',
-            children: [
-              { title: '正在开发 1-1' },
-              { title: '正在开发 1-2' }
-            ]
-          },
-          { title: '正在开发 2' },
-          { title: '正在开发 3' }
-        ]
-      },
-      {
-        title: 'svg 菜单图标',
-        iconSvg: 'd2admin',
-        children: [
-          { title: 'add', iconSvg: 'add' },
-          { title: 'alarm', iconSvg: 'alarm' },
-          { title: 'camera', iconSvg: 'camera' },
-          { title: 'history', iconSvg: 'history' },
-          { title: 'like', iconSvg: 'like' },
-          { title: 'love', iconSvg: 'love' },
-          { title: 'message', iconSvg: 'message' },
-          { title: 'notice', iconSvg: 'notice' },
-          { title: 'search', iconSvg: 'search' },
-          { title: 'share', iconSvg: 'share' },
-          { title: 'star', iconSvg: 'star' },
-          { title: 'user', iconSvg: 'user' }
-        ]
      }
    ]
  },
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -1,9 +1,41 @@
 export default {
  path: '/demo/d2-crud',
  title: 'D2 CRUD',
-  icon: 'table',
+  iconSvg: 'd2-crud',
  children: (pre => [
    { path: `${pre}index`, title: 'D2 CRUD 首页', icon: 'home' },
-    { path: `${pre}demo1`, title: '示例1' }
+    {
+      title: '基础功能',
+      children: [
+        { path: `${pre}demo1`, title: '基础表格' },
+        { path: `${pre}demo2`, title: '带斑马纹表格' },
+        { path: `${pre}demo3`, title: '带边框表格' },
+        { path: `${pre}demo4`, title: '带状态表格' },
+        { path: `${pre}demo5`, title: '固定表头' },
+        { path: `${pre}demo6`, title: '固定列' },
+        { path: `${pre}demo7`, title: '流体高度' },
+        { path: `${pre}demo8`, title: '多级表头' },
+        { path: `${pre}demo9`, title: '单选' },
+        { path: `${pre}demo10`, title: '多选' },
+        { path: `${pre}demo11`, title: '排序' },
+        { path: `${pre}demo12`, title: '筛选' },
+        { path: `${pre}demo13`, title: '表尾合计行' },
+        { path: `${pre}demo14`, title: '合并行' },
+        { path: `${pre}demo15`, title: '合并列' }
+      ]
+    },
+    {
+      title: '数据操作',
+      children: [
+        { path: `${pre}demo16`, title: '新增数据' },
+        { path: `${pre}demo17`, title: '修改数据' },
+        { path: `${pre}demo18`, title: '删除数据' },
+        { path: `${pre}demo19`, title: '自定义操作列' },
+        { path: `${pre}demo20`, title: '表单组件渲染' },
+        { path: `${pre}demo21`, title: '表单布局' },
+        { path: `${pre}demo22`, title: '表单校验' },
+        { path: `${pre}demo23`, title: '表格内编辑' }
+      ]
+    }
  ])('/demo/d2-crud/')
 }
--- a/src/menu/modules/demo-playground.js
+++ b/src/menu/modules/demo-playground.js
@@ -4,6 +4,39 @@ export default {
  icon: 'flask',
  children: (pre => [
    { path: `${pre}index`, title: '试验台首页', icon: 'home' },
+    {
+      title: 'svg 菜单图标',
+      iconSvg: 'd2-admin',
+      children: [
+        { title: 'add', iconSvg: 'add' },
+        { title: 'alarm', iconSvg: 'alarm' },
+        { title: 'camera', iconSvg: 'camera' },
+        { title: 'history', iconSvg: 'history' },
+        { title: 'like', iconSvg: 'like' },
+        { title: 'love', iconSvg: 'love' },
+        { title: 'message', iconSvg: 'message' },
+        { title: 'notice', iconSvg: 'notice' },
+        { title: 'search', iconSvg: 'search' },
+        { title: 'share', iconSvg: 'share' },
+        { title: 'star', iconSvg: 'star' },
+        { title: 'user', iconSvg: 'user' }
+      ]
+    },
+    {
+      title: '空菜单演示',
+      icon: 'folder-o',
+      children: [
+        {
+          title: '正在开发 1',
+          children: [
+            { title: '正在开发 1-1' },
+            { title: '正在开发 1-2' }
+          ]
+        },
+        { title: '正在开发 2' },
+        { title: '正在开发 3' }
+      ]
+    },
    {
      path: `${pre}page-cache`,
      title: '页面缓存',
--- a/src/pages/demo/d2-crud/demo1/code.js
+++ b/src/pages/demo/d2-crud/demo1/code.js
@@ -0,0 +1,58 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :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 弄'
+        }
+      ]
+    }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo1/doc.md
+++ b/src/pages/demo/d2-crud/demo1/doc.md
@@ -0,0 +1 @@
+在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2Data` 拿到变化后的表格数据。代码如下：
--- a/src/pages/demo/d2-crud/demo1/index.vue
+++ b/src/pages/demo/d2-crud/demo1/index.vue
@@ -1,9 +1,73 @@
 <template>
  <d2-container>
-    <template slot="header">header</template>
-    main
+    <template slot="header">基础表格</template>
+    <d2-crud
+      ref="d2Crud"
+      :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-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',
+          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 弄'
+        }
+      ]
+    }
+  },
+  mounted () {
+    console.log(this.$refs.d2Crud.d2Data)
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo10/code.js
+++ b/src/pages/demo/d2-crud/demo10/code.js
@@ -0,0 +1,59 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      selection-row
+      @selection-change="handleSelectionChange"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSelectionChange (selection) {
+      console.log(selection)
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo10/doc.md
+++ b/src/pages/demo/d2-crud/demo10/doc.md
@@ -0,0 +1 @@
+`D2 Crud` 组件提供了多选的支持，只需要配置 `selection-row` 属性即可实现多选。之后由 `selection-change` 事件来管理选择项发生变化时触发的事件，它会传入 `selection` 。代码如下：
--- a/src/pages/demo/d2-crud/demo10/index.vue
+++ b/src/pages/demo/d2-crud/demo10/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <d2-container>
+    <template slot="header">多选</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      selection-row
+      @selection-change="handleSelectionChange">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSelectionChange (selection) {
+      console.log(selection)
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo11/code.js
+++ b/src/pages/demo/d2-crud/demo11/code.js
@@ -0,0 +1,60 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          sortable: true
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      options: {
+        defaultSort: {
+          prop: 'date',
+          order: 'descending'
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo11/doc.md
+++ b/src/pages/demo/d2-crud/demo11/doc.md
@@ -0,0 +1 @@
+在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：
--- a/src/pages/demo/d2-crud/demo11/index.vue
+++ b/src/pages/demo/d2-crud/demo11/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <d2-container>
+    <template slot="header">排序</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options">
+    </d2-crud>
+    <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',
+          sortable: true
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      options: {
+        defaultSort: {
+          prop: 'date',
+          order: 'descending'
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo12/code.js
+++ b/src/pages/demo/d2-crud/demo12/code.js
@@ -0,0 +1,68 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '标签',
+          key: 'tag',
+          filters: [
+            { text: '家', value: '家' },
+            { text: '公司', value: '公司' }
+          ],
+          filterMethod (value, row) {
+            return row.tag === value
+          },
+          filterPlacement: 'bottom-end'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          tag: '家'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          tag: '公司'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          tag: '家'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          tag: '公司'
+        }
+      ]
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo12/doc.md
+++ b/src/pages/demo/d2-crud/demo12/doc.md
@@ -0,0 +1 @@
+在 `columns` 中设置 `filters` `filterMethod` 属性即可开启该列的筛选，`filters` 是一个数组， `filterMethod` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。代码如下：
--- a/src/pages/demo/d2-crud/demo12/index.vue
+++ b/src/pages/demo/d2-crud/demo12/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <d2-container>
+    <template slot="header">筛选</template>
+    <d2-crud
+      :columns="columns"
+      :data="data">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        },
+        {
+          title: '标签',
+          key: 'tag',
+          filters: [
+            { text: '家', value: '家' },
+            { text: '公司', value: '公司' }
+          ],
+          filterMethod (value, row) {
+            return row.tag === value
+          },
+          filterPlacement: 'bottom-end'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          tag: '家'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          tag: '公司'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          tag: '家'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          tag: '公司'
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo13/code.js
+++ b/src/pages/demo/d2-crud/demo13/code.js
@@ -0,0 +1,105 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        showSummary: true,
+        summaryMethod (param) {
+          const { columns, data } = param
+          const sums = []
+          columns.forEach((column, index) => {
+            if (index === 0) {
+              sums[index] = '总价'
+              return
+            }
+            const values = data.map(item => Number(item[column.property]))
+            if (!values.every(value => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+              sums[index] += ' 元'
+            } else {
+              sums[index] = 'N/A'
+            }
+          })
+
+          return sums
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo13/doc.md
+++ b/src/pages/demo/d2-crud/demo13/doc.md
@@ -0,0 +1 @@
+将 `options` 中的 `showSummary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sumText` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summaryMethod` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。代码如下：
--- a/src/pages/demo/d2-crud/demo13/index.vue
+++ b/src/pages/demo/d2-crud/demo13/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <d2-container>
+    <template slot="header">表尾合计行</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options">
+    </d2-crud>
+    <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: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        showSummary: true,
+        summaryMethod (param) {
+          const { columns, data } = param
+          const sums = []
+          columns.forEach((column, index) => {
+            if (index === 0) {
+              sums[index] = '总价'
+              return
+            }
+            const values = data.map(item => Number(item[column.property]))
+            if (!values.every(value => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+              sums[index] += ' 元'
+            } else {
+              sums[index] = 'N/A'
+            }
+          })
+
+          return sums
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo14/code.js
+++ b/src/pages/demo/d2-crud/demo14/code.js
@@ -0,0 +1,88 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        border: true,
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+          if (rowIndex % 2 === 0) {
+            if (columnIndex === 0) {
+              return [1, 2]
+            } else if (columnIndex === 1) {
+              return [0, 0]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo14/doc.md
+++ b/src/pages/demo/d2-crud/demo14/doc.md
@@ -0,0 +1 @@
+通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan` ，第二个元素代表 `colspan` 。代码如下：
--- a/src/pages/demo/d2-crud/demo14/index.vue
+++ b/src/pages/demo/d2-crud/demo14/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <d2-container>
+    <template slot="header">合并行</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options">
+    </d2-crud>
+    <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: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        border: true,
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+          if (rowIndex % 2 === 0) {
+            if (columnIndex === 0) {
+              return [1, 2]
+            } else if (columnIndex === 1) {
+              return [0, 0]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo15/code.js
+++ b/src/pages/demo/d2-crud/demo15/code.js
@@ -0,0 +1,94 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        border: true,
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+          if (columnIndex === 0) {
+            if (rowIndex % 2 === 0) {
+              return {
+                rowspan: 2,
+                colspan: 1
+              }
+            } else {
+              return {
+                rowspan: 0,
+                colspan: 0
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo15/doc.md
+++ b/src/pages/demo/d2-crud/demo15/doc.md
@@ -0,0 +1 @@
+通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个键名为 `rowspan` 和 `colspan` 的对象。代码如下：
--- a/src/pages/demo/d2-crud/demo15/index.vue
+++ b/src/pages/demo/d2-crud/demo15/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <d2-container>
+    <template slot="header">合并列</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options">
+    </d2-crud>
+    <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: 'ID',
+          key: 'id'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '数值 1',
+          key: 'amount1'
+        },
+        {
+          title: '数值 2',
+          key: 'amount2'
+        },
+        {
+          title: '数值 3',
+          key: 'amount3'
+        }
+      ],
+      data: [
+        {
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        },
+        {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        },
+        {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        },
+        {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        },
+        {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }
+      ],
+      options: {
+        border: true,
+        spanMethod ({ row, column, rowIndex, columnIndex }) {
+          if (columnIndex === 0) {
+            if (rowIndex % 2 === 0) {
+              return {
+                rowspan: 2,
+                colspan: 1
+              }
+            } else {
+              return {
+                rowspan: 0,
+                colspan: 0
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo16/code.js
+++ b/src/pages/demo/d2-crud/demo16/code.js
@@ -0,0 +1,103 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      add-mode
+      :addButton="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-add="handleRowAdd"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+          }
+      ],
+      addButton: {
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '2016-05-05'
+        },
+        name: {
+          title: '姓名',
+          value: '王小虎'
+        },
+        address: {
+          title: '地址',
+          value: '上海市普陀区金沙江路 1520 弄'
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(row)
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+        done()
+        this.formOptions.saveLoading = false
+      }, 300);
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消保存',
+        type: 'warning'
+      });
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo16/doc.md
+++ b/src/pages/demo/d2-crud/demo16/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
--- a/src/pages/demo/d2-crud/demo16/index.vue
+++ b/src/pages/demo/d2-crud/demo16/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <d2-container>
+    <template slot="header">新增数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      add-mode
+      :addButton="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-add="handleRowAdd"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      addButton: {
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '2016-05-05'
+        },
+        name: {
+          title: '姓名',
+          value: '王小虎'
+        },
+        address: {
+          title: '地址',
+          value: '上海市普陀区金沙江路 1520 弄'
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(row)
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消保存',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo17/code.js
+++ b/src/pages/demo/d2-crud/demo17/code.js
@@ -0,0 +1,108 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo17/doc.md
+++ b/src/pages/demo/d2-crud/demo17/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
--- a/src/pages/demo/d2-crud/demo17/index.vue
+++ b/src/pages/demo/d2-crud/demo17/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <d2-container>
+    <template slot="header">修改数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo18/code.js
+++ b/src/pages/demo/d2-crud/demo18/code.js
@@ -0,0 +1,76 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @row-remove="handleRowRemove"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        remove: {
+          icon: 'el-icon-delete',
+          size: 'small',
+          fixed: 'right',
+          confirm: true
+        }
+      }
+    }
+  },
+  methods: {
+    handleRowRemove ({index, row}, done) {
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        done()
+      }, 300)
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo18/doc.md
+++ b/src/pages/demo/d2-crud/demo18/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `remove` 对象可以开启删除模式，`confirm` 属性的值为 `Boolean` 类型，控制删除前是否弹出confirm框进行提示， `row-remove` 事件控制数据删除，参数： `index` 是当前删除行的索引， `row` 是当前删除行的数据， `done` 用于控制删除成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
--- a/src/pages/demo/d2-crud/demo18/index.vue
+++ b/src/pages/demo/d2-crud/demo18/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <d2-container>
+    <template slot="header">删除数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @row-remove="handleRowRemove">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        remove: {
+          icon: 'el-icon-delete',
+          size: 'small',
+          fixed: 'right',
+          confirm: true
+        }
+      }
+    }
+  },
+  methods: {
+    handleRowRemove ({index, row}, done) {
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        done()
+      }, 300)
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo19/code.js
+++ b/src/pages/demo/d2-crud/demo19/code.js
@@ -0,0 +1,71 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @custom-emit-1="handleCustomEvent"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        custom: [
+          {
+            text: '自定义按钮',
+            type: 'warning',
+            size: 'small',
+            emit: 'custom-emit-1'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCustomEvent ({index, row}) {
+      console.log(index)
+      console.log(row)
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo19/doc.md
+++ b/src/pages/demo/d2-crud/demo19/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `custom` 数组对象可以自定义模式，数组中每一个对象定义一个自定义按钮，对象属性支持所有的 `el-button` 属性， `emit` 属性定义了监听的事件，例如 `emit` 的值为 `custom-emit-1`，就在 `D2 Crud` 中监听 `custom-emit-1` 事件 监听的事件参数： `index` 是当前行的索引， `row` 是当前行的数据。代码如下：
--- a/src/pages/demo/d2-crud/demo19/index.vue
+++ b/src/pages/demo/d2-crud/demo19/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <d2-container>
+    <template slot="header">自定义操作列</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      @custom-emit-1="handleCustomEvent">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        custom: [
+          {
+            text: '自定义按钮',
+            type: 'warning',
+            size: 'small',
+            emit: 'custom-emit-1'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleCustomEvent ({index, row}) {
+      console.log(index)
+      console.log(row)
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo2/code.js
+++ b/src/pages/demo/d2-crud/demo2/code.js
@@ -0,0 +1,58 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </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 弄'
+        }
+      ],
+      options: {
+        stripe: true
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo2/doc.md
+++ b/src/pages/demo/d2-crud/demo2/doc.md
@@ -0,0 +1 @@
+`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
--- a/src/pages/demo/d2-crud/demo2/index.vue
+++ b/src/pages/demo/d2-crud/demo2/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <d2-container>
+    <template slot="header">带斑马纹表格</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+    <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',
+          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 弄'
+        }
+      ],
+      options: {
+        stripe: true
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo20/code.js
+++ b/src/pages/demo/d2-crud/demo20/code.js
@@ -0,0 +1,133 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单组件渲染',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            name: 'el-date-picker',
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            name: 'el-select',
+            options: [
+              {
+                value: '王小虎',
+                label: '王小虎'
+              },
+              {
+                value: '王中虎',
+                label: '王中虎'
+              },
+              {
+                value: '王老虎',
+                label: '王老虎'
+              }
+            ],
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo20/doc.md
+++ b/src/pages/demo/d2-crud/demo20/doc.md
@@ -0,0 +1 @@
+向 `form-template` 的 `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函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
--- a/src/pages/demo/d2-crud/demo20/index.vue
+++ b/src/pages/demo/d2-crud/demo20/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <d2-container>
+    <template slot="header">表单组件渲染</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单组件渲染',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            name: 'el-date-picker',
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            name: 'el-select',
+            options: [
+              {
+                value: '王小虎',
+                label: '王小虎'
+              },
+              {
+                value: '王中虎',
+                label: '王中虎'
+              },
+              {
+                value: '王老虎',
+                label: '王老虎'
+              }
+            ],
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo21/code.js
+++ b/src/pages/demo/d2-crud/demo21/code.js
@@ -0,0 +1,117 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单布局',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo21/doc.md
+++ b/src/pages/demo/d2-crud/demo21/doc.md
@@ -0,0 +1 @@
+向 `form-options` 中传入 `gutter` 属性来控制栅格间隔，向 `form-template` 的 `component` 对象传入 `span` 属性来控制栅格占据的列数。代码如下：
--- a/src/pages/demo/d2-crud/demo21/index.vue
+++ b/src/pages/demo/d2-crud/demo21/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <d2-container>
+    <template slot="header">表单布局</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      rowHandle: {
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我查看表单布局',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        name: {
+          title: '姓名',
+          value: '',
+          component: {
+            span: 12
+          }
+        },
+        address: {
+          title: '地址',
+          value: '',
+          component: {
+            span: 18
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false,
+        gutter: 20
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo22/code.js
+++ b/src/pages/demo/d2-crud/demo22/code.js
@@ -0,0 +1,110 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      addMode
+      :addButton="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      :form-rules="formRules"
+      @row-add="handleRowAdd"
+      @dialog-cancel="handleDialogCancel"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      addButton: {
+        text: '点我查看表单校验',
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      },
+      formRules: {
+        date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
+        name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
+        address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(row)
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        });
+        done()
+        this.formOptions.saveLoading = false
+      }, 300);
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消保存',
+        type: 'warning'
+      });
+      done()
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo22/doc.md
+++ b/src/pages/demo/d2-crud/demo22/doc.md
@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `form-rules` 可开启表单校验，校验规则参见：[async-validator](https://github.com/yiminghe/async-validator)。代码如下：
--- a/src/pages/demo/d2-crud/demo22/index.vue
+++ b/src/pages/demo/d2-crud/demo22/index.vue
@@ -0,0 +1,126 @@
+<template>
+  <d2-container>
+    <template slot="header">表单校验</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      addMode
+      :addButton="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      :form-rules="formRules"
+      @row-add="handleRowAdd"
+      @dialog-cancel="handleDialogCancel">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      addButton: {
+        text: '点我查看表单校验',
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      },
+      formRules: {
+        date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
+        name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
+        address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(row)
+        this.$message({
+          message: '保存成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消保存',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo23/code.js
+++ 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>`
--- a/src/pages/demo/d2-crud/demo23/doc.md
+++ 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)。代码如下：
--- a/src/pages/demo/d2-crud/demo23/index.vue
+++ 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>
--- a/src/pages/demo/d2-crud/demo3/code.js
+++ b/src/pages/demo/d2-crud/demo3/code.js
@@ -0,0 +1,58 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </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 弄'
+        }
+      ],
+      options: {
+        border: true
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo3/doc.md
+++ b/src/pages/demo/d2-crud/demo3/doc.md
@@ -0,0 +1 @@
+默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下：
--- a/src/pages/demo/d2-crud/demo3/index.vue
+++ b/src/pages/demo/d2-crud/demo3/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <d2-container>
+    <template slot="header">带边框表格</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+    <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',
+          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 弄'
+        }
+      ],
+      options: {
+        border: true
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo4/code.js
+++ b/src/pages/demo/d2-crud/demo4/code.js
@@ -0,0 +1,75 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </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 弄'
+        }
+      ],
+      options: {
+        rowClassName ({row, rowIndex}) {
+          if (rowIndex === 1) {
+            return 'warning-row'
+          } else if (rowIndex === 3) {
+            return 'success-row'
+          }
+          return ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+</style>`
--- a/src/pages/demo/d2-crud/demo4/doc.md
+++ b/src/pages/demo/d2-crud/demo4/doc.md
@@ -0,0 +1 @@
+可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下：
--- a/src/pages/demo/d2-crud/demo4/index.vue
+++ b/src/pages/demo/d2-crud/demo4/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <d2-container>
+    <template slot="header">带状态表格</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+    <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',
+          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 弄'
+        }
+      ],
+      options: {
+        rowClassName ({row, rowIndex}) {
+          if (rowIndex === 1) {
+            return 'warning-row'
+          } else if (rowIndex === 3) {
+            return 'success-row'
+          }
+          return ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+</style>
--- a/src/pages/demo/d2-crud/demo5/code.js
+++ b/src/pages/demo/d2-crud/demo5/code.js
@@ -0,0 +1,73 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </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-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-08',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-06',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-07',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ],
+      options: {
+        height: '250'
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo5/doc.md
+++ b/src/pages/demo/d2-crud/demo5/doc.md
@@ -0,0 +1 @@
+只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下：
--- a/src/pages/demo/d2-crud/demo5/index.vue
+++ b/src/pages/demo/d2-crud/demo5/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <d2-container>
+    <template slot="header">固定表头</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+    <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',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-08',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-06',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-07',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ],
+      options: {
+        height: '250'
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo6/code.js
+++ b/src/pages/demo/d2-crud/demo6/code.js
@@ -0,0 +1,83 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180',
+          fixed: true
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '省份',
+          key: 'province',
+          width: '300'
+        },
+        {
+          title: '市区',
+          key: 'city',
+          width: '300'
+        },
+        {
+          title: '地址',
+          key: 'address',
+          width: '300'
+        },
+        {
+          title: '邮编',
+          key: 'zip',
+          fixed: 'right'
+        }
+      ],
+      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
+        }
+      ]
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo6/doc.md
+++ b/src/pages/demo/d2-crud/demo6/doc.md
@@ -0,0 +1 @@
+固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下：
--- a/src/pages/demo/d2-crud/demo6/index.vue
+++ b/src/pages/demo/d2-crud/demo6/index.vue
@@ -0,0 +1,98 @@
+<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',
+          width: '180',
+          fixed: true
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          title: '省份',
+          key: 'province',
+          width: '300'
+        },
+        {
+          title: '市区',
+          key: 'city',
+          width: '300'
+        },
+        {
+          title: '地址',
+          key: 'address',
+          width: '300'
+        },
+        {
+          title: '邮编',
+          key: 'zip',
+          fixed: 'right'
+        }
+      ],
+      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
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo7/code.js
+++ b/src/pages/demo/d2-crud/demo7/code.js
@@ -0,0 +1,112 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"
+      :rowHandle="rowHandle"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '省份',
+          key: 'province'
+        },
+        {
+          title: '市区',
+          key: 'city'
+        },
+        {
+          title: '地址',
+          key: 'address',
+          width: '300'
+        },
+        {
+          title: '邮编',
+          key: 'zip'
+        }
+      ],
+      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
+        }
+      ],
+      options: {
+        maxHeight: '250'
+      },
+      rowHandle: {
+        remove: {
+          size: 'mini',
+          confirm: false
+        }
+      }
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo7/doc.md
+++ b/src/pages/demo/d2-crud/demo7/doc.md
@@ -0,0 +1 @@
+通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下：
--- a/src/pages/demo/d2-crud/demo7/index.vue
+++ b/src/pages/demo/d2-crud/demo7/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <d2-container>
+    <template slot="header">流体高度</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"
+      :rowHandle="rowHandle"/>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          title: '省份',
+          key: 'province'
+        },
+        {
+          title: '市区',
+          key: 'city'
+        },
+        {
+          title: '地址',
+          key: 'address',
+          width: '300'
+        },
+        {
+          title: '邮编',
+          key: 'zip'
+        }
+      ],
+      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
+        }
+      ],
+      options: {
+        maxHeight: '250'
+      },
+      rowHandle: {
+        remove: {
+          size: 'mini',
+          confirm: false
+        }
+      }
+    }
+  }
+}
+</script>
--- a/src/pages/demo/d2-crud/demo8/code.js
+++ 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>`
--- a/src/pages/demo/d2-crud/demo8/doc.md
+++ b/src/pages/demo/d2-crud/demo8/doc.md
@@ -0,0 +1 @@
+数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：
--- a/src/pages/demo/d2-crud/demo8/index.vue
+++ b/src/pages/demo/d2-crud/demo8/index.vue
@@ -0,0 +1,121 @@
+<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>
--- a/src/pages/demo/d2-crud/demo9/code.js
+++ b/src/pages/demo/d2-crud/demo9/code.js
@@ -0,0 +1,64 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"
+      index-row
+      @current-change="handleCurrentChange"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      options: {
+        highlightCurrentRow: true
+      }
+    }
+  },
+  methods: {
+    handleCurrentChange (currentRow, oldCurrentRow) {
+      console.log(currentRow)
+      console.log(oldCurrentRow)
+    }
+  }
+}
+</script>`
--- a/src/pages/demo/d2-crud/demo9/doc.md
+++ b/src/pages/demo/d2-crud/demo9/doc.md
@@ -0,0 +1 @@
+`D2 Crud` 组件提供了单选的支持，只需要在 `options` 对象中将 `highlightCurrentRow` 属性设为 `true` 即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow` 和 `oldCurrentRow`。如果需要显示索引，需要配置 `index-row` 属性。代码如下：
--- a/src/pages/demo/d2-crud/demo9/index.vue
+++ b/src/pages/demo/d2-crud/demo9/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <d2-container>
+    <template slot="header">单选</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"
+      index-row
+      @current-change="handleCurrentChange">
+    </d2-crud>
+    <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: '姓名',
+          key: 'name'
+        },
+        {
+          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 弄'
+        }
+      ],
+      options: {
+        highlightCurrentRow: true
+      }
+    }
+  },
+  methods: {
+    handleCurrentChange (currentRow, oldCurrentRow) {
+      console.log(currentRow)
+      console.log(oldCurrentRow)
+    }
+  }
+}
+</script>
--- a/src/pages/index/page.vue
+++ b/src/pages/index/page.vue
@@ -3,7 +3,7 @@
    <d2-page-cover
      title="I AM D2ADMIN"
      sub-title="追求简约美感的后台管理系统集成方案">
-      <d2-icon-svg style="width: 120px;" name="d2admin"/>
+      <d2-icon-svg style="width: 120px;" name="d2-admin"/>
      <template slot="footer">
        <div class="page__btn-group">
          <span @click="$open('https://github.com/d2-projects')">项目组</span> |
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-bd272213cf5328eff3aabfe6d4aea9c30c5833e3
+f5ad92d6dec7e541030e26da35a3cb2dd5cb620f
--- a/yarn.lock.REMOVED.git-id
+++ b/yarn.lock.REMOVED.git-id
@@ -1 +1 @@
-af85eae29fbff0afbf131fe2a3fb043948dc48e3
+44291d399f7241e2f8385a408fcc1521b0f58d96
				`@@ -0,0 +1 @@`
				在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2Data` 拿到变化后的表格数据。代码如下：
				`@@ -0,0 +1 @@`
				`D2 Crud` 组件提供了多选的支持，只需要配置 `selection-row` 属性即可实现多选。之后由 `selection-change` 事件来管理选择项发生变化时触发的事件，它会传入 `selection` 。代码如下：
				`@@ -0,0 +1 @@`
				在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：
				`@@ -0,0 +1 @@`
				在 `columns` 中设置 `filters` `filterMethod` 属性即可开启该列的筛选，`filters` 是一个数组， `filterMethod` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。代码如下：
				`@@ -0,0 +1 @@`
				将 `options` 中的 `showSummary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sumText` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summaryMethod` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。代码如下：
				`@@ -0,0 +1 @@`
				通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan` ，第二个元素代表 `colspan` 。代码如下：
				`@@ -0,0 +1 @@`
				通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
				`@@ -0,0 +1 @@`
				通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
				`@@ -0,0 +1 @@`
				`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
				`@@ -0,0 +1 @@`
				向 `form-template` 的 `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函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：