d2-crud 单选

Former-commit-id: f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly f77250d91b90e9dd3fdf374966c27936e5805e7a [formerly 5cced044ea5dda254eb1504a570e1b5b9afbb35e [formerly e0598d675e7026e265dcf4d5024f0f66ee9c1b39]]]]]
Former-commit-id: 40e5719db55936e37f14ce5266a14d5e91ef23af
Former-commit-id: c167dc8ab982f1ebf7ef6fcb6ee78c6ca15ed007
Former-commit-id: 193951ad3688cf7e83084340d1d7fe92acf906fa [formerly 74d1192239c08c93bbdffeb8b62e74aa85e3ae7f]
Former-commit-id: fef418d170b006fb8416483d8896d4904ffb2134
Former-commit-id: 25f655562db68b4eda7bdbaa0c859e755607ae91
Former-commit-id: ffcca2588cc1853f7e9ba3235029f05cc71ce8e3
Former-commit-id: 2f93b38bd00d10a693a49f872bb81164b4221378
Former-commit-id: 51fbad2adf326e2789d4aa1931a4a138fb2dacd1

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

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

src/pages/demo/d2-crud/demo9/doc.md

@@ -0,0 +1 @@
+`D2 Crud` 组件提供了单选的支持，只需要在 `options` 对象中将 `highlightCurrentRow` 属性设为 `true` 即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow` 和 `oldCurrentRow`。如果需要显示索引，需要配置 `index-row` 属性。代码如下：

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>

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

@@ -1 +1 @@
-1b0ae5476017971f2818adc72e8f78713e1a64f7
+b8b55dc98d4d6c94c6fc66cd1e953f7637936ed4