From cf85416cce4824000aa3528287cfc8e8edb2c9d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 28 Aug 2018 09:41:12 +0800
Subject: [PATCH] =?UTF-8?q?d2-crud=20=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 2bff4175f7d9bec767f83860b0a868dd0b969655 [formerly 2bff4175f7d9bec767f83860b0a868dd0b969655 [formerly 2bff4175f7d9bec767f83860b0a868dd0b969655 [formerly 2bff4175f7d9bec767f83860b0a868dd0b969655 [formerly 9b7db1eaf47b53d5d150c8b970f4261ce2b854f2 [formerly 8e3ae366af52dca71d47b67a90cea85d4f079abb]]]]]
Former-commit-id: e8bde0b03148cf36c4ffc42a2b9338592e0b6727
Former-commit-id: 0628fba756e58527c744875739f23b3b7dbc619d
Former-commit-id: fac0d9372ad2b3a5594f1b0f1c682ccd06f32126 [formerly 5f19470d4120bdd71c5b25e7d53a3e7b33744d6b]
Former-commit-id: 6eef9e1ae4e5e6e0ce7f930812cca36d41cccccd
Former-commit-id: b259cf2b350098d6835ff618647d8794bd9103c3
Former-commit-id: 15c6f7d99028900a35107c3f23e25596f3b6ea3e
Former-commit-id: 40345d53ad2ae7c7d262263042a18808bec4bd53
Former-commit-id: 476518968208bc43f753ab6acf2394609b5f2b43
---
 src/menu/modules/demo-d2-crud.js        |  3 +-
 src/pages/demo/d2-crud/demo11/code.js   | 60 +++++++++++++++++
 src/pages/demo/d2-crud/demo11/doc.md    |  1 +
 src/pages/demo/d2-crud/demo11/index.vue | 86 +++++++++++++++++++++++++
 src/router/routes.js.REMOVED.git-id     |  2 +-
 5 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/demo/d2-crud/demo11/code.js
 create mode 100644 src/pages/demo/d2-crud/demo11/doc.md
 create mode 100644 src/pages/demo/d2-crud/demo11/index.vue

diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index 3acdc8c2..a7a7e1f4 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -13,6 +13,7 @@ export default {
     { path: `${pre}demo7`, title: '流体高度' },
     { path: `${pre}demo8`, title: '多级表头' },
     { path: `${pre}demo9`, title: '单选' },
-    { path: `${pre}demo10`, title: '多选' }
+    { path: `${pre}demo10`, title: '多选' },
+    { path: `${pre}demo11`, title: '排序' }
   ])('/demo/d2-crud/')
 }
diff --git a/src/pages/demo/d2-crud/demo11/code.js b/src/pages/demo/d2-crud/demo11/code.js
new file mode 100644
index 00000000..63f89f0c
--- /dev/null
+++ 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>`
diff --git a/src/pages/demo/d2-crud/demo11/doc.md b/src/pages/demo/d2-crud/demo11/doc.md
new file mode 100644
index 00000000..7831ca76
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo11/doc.md
@@ -0,0 +1 @@
+在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：
diff --git a/src/pages/demo/d2-crud/demo11/index.vue b/src/pages/demo/d2-crud/demo11/index.vue
new file mode 100644
index 00000000..4621a1b7
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo11/index.vue
@@ -0,0 +1,86 @@
+<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>
+
+<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 9c74607a..10307cbf 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-2f4b1ce7274521abba33ad6509f239a4fc7ede76
\ No newline at end of file
+f97628e615568020c3de348bdc064cb2a7dc3061
\ No newline at end of file