diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index 1c8c4fc1..c3b4686d 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -11,6 +11,7 @@ export default {
     { path: `${pre}demo5`, title: '固定表头' },
     { path: `${pre}demo6`, title: '固定列' },
     { path: `${pre}demo7`, title: '流体高度' },
-    { path: `${pre}demo8`, title: '多级表头' }
+    { path: `${pre}demo8`, title: '多级表头' },
+    { path: `${pre}demo9`, title: '单选' }
   ])('/demo/d2-crud/')
 }
diff --git a/src/pages/demo/d2-crud/demo1/doc.md b/src/pages/demo/d2-crud/demo1/doc.md
index 4695daf4..600721ad 100644
--- a/src/pages/demo/d2-crud/demo1/doc.md
+++ b/src/pages/demo/d2-crud/demo1/doc.md
@@ -1 +1 @@
-在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下：
\ No newline at end of file
+在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下：
diff --git a/src/pages/demo/d2-crud/demo2/doc.md b/src/pages/demo/d2-crud/demo2/doc.md
index 6e554c65..71a1f7c0 100644
--- a/src/pages/demo/d2-crud/demo2/doc.md
+++ b/src/pages/demo/d2-crud/demo2/doc.md
@@ -1 +1 @@
-`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
\ No newline at end of file
+`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
diff --git a/src/pages/demo/d2-crud/demo3/doc.md b/src/pages/demo/d2-crud/demo3/doc.md
index 56d5d43b..0ff20774 100644
--- a/src/pages/demo/d2-crud/demo3/doc.md
+++ b/src/pages/demo/d2-crud/demo3/doc.md
@@ -1 +1 @@
-默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下：
\ No newline at end of file
+默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下：
diff --git a/src/pages/demo/d2-crud/demo4/doc.md b/src/pages/demo/d2-crud/demo4/doc.md
index c68dfde1..ef0b14d1 100644
--- a/src/pages/demo/d2-crud/demo4/doc.md
+++ b/src/pages/demo/d2-crud/demo4/doc.md
@@ -1 +1 @@
-可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下：
\ No newline at end of file
+可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下：
diff --git a/src/pages/demo/d2-crud/demo5/doc.md b/src/pages/demo/d2-crud/demo5/doc.md
index 27edca6f..bae31834 100644
--- a/src/pages/demo/d2-crud/demo5/doc.md
+++ b/src/pages/demo/d2-crud/demo5/doc.md
@@ -1 +1 @@
-只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下：
\ No newline at end of file
+只要在 `options` 对象中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。代码如下：
diff --git a/src/pages/demo/d2-crud/demo6/doc.md b/src/pages/demo/d2-crud/demo6/doc.md
index 1cf1f937..e6ea2834 100644
--- a/src/pages/demo/d2-crud/demo6/doc.md
+++ b/src/pages/demo/d2-crud/demo6/doc.md
@@ -1 +1 @@
-固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下：
\ No newline at end of file
+固定列需要在 `columns` 对象数组中给需要固定的列传入 `fixed` 属性，它接受 `Boolean` 值或者 `left` `right` ，表示左边固定还是右边固定。代码如下：
diff --git a/src/pages/demo/d2-crud/demo7/doc.md b/src/pages/demo/d2-crud/demo7/doc.md
index 264dba3b..79a8afe0 100644
--- a/src/pages/demo/d2-crud/demo7/doc.md
+++ b/src/pages/demo/d2-crud/demo7/doc.md
@@ -1 +1 @@
-通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下：
\ No newline at end of file
+通过在 `options` 对象设置 `maxHeight` 属性为 `D2 Crud` 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。代码如下：
diff --git a/src/pages/demo/d2-crud/demo8/doc.md b/src/pages/demo/d2-crud/demo8/doc.md
index e7f46d62..31fcb94e 100644
--- a/src/pages/demo/d2-crud/demo8/doc.md
+++ b/src/pages/demo/d2-crud/demo8/doc.md
@@ -1 +1 @@
-数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：
\ No newline at end of file
+数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系，只需在 `columns` 中使用 `children` 字段对子级表头进行嵌套即可。代码如下：
diff --git a/src/pages/demo/d2-crud/demo9/code.js b/src/pages/demo/d2-crud/demo9/code.js
new file mode 100644
index 00000000..c4b03ee9
--- /dev/null
+++ 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>`
diff --git a/src/pages/demo/d2-crud/demo9/doc.md b/src/pages/demo/d2-crud/demo9/doc.md
new file mode 100644
index 00000000..a6efc561
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo9/doc.md
@@ -0,0 +1 @@
+`D2 Crud` 组件提供了单选的支持，只需要在 `options` 对象中将 `highlightCurrentRow` 属性设为 `true` 即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow` 和 `oldCurrentRow`。如果需要显示索引，需要配置 `index-row` 属性。代码如下：
diff --git a/src/pages/demo/d2-crud/demo9/index.vue b/src/pages/demo/d2-crud/demo9/index.vue
new file mode 100644
index 00000000..f1ba5874
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo9/index.vue
@@ -0,0 +1,90 @@
+<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>
+
+<style>
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+</style>
diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id
index e3ebee15..85d33efa 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-1b0ae5476017971f2818adc72e8f78713e1a64f7
\ No newline at end of file
+b8b55dc98d4d6c94c6fc66cd1e953f7637936ed4
\ No newline at end of file