From 617bd67c658d08a465dbfe9fb72a7fec58785434 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 10:00:45 +0800
Subject: [PATCH] =?UTF-8?q?d2-crud=20=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: ce54da6a3adb33c4f5670059c1a0e2cb923d9a00 [formerly ce54da6a3adb33c4f5670059c1a0e2cb923d9a00 [formerly ce54da6a3adb33c4f5670059c1a0e2cb923d9a00 [formerly ce54da6a3adb33c4f5670059c1a0e2cb923d9a00 [formerly 3c44916360da76b49d117befe0f81a641f6315fa [formerly 592148a1be6334389df735529f273d2b937d0427]]]]]
Former-commit-id: 22ed44ade276867f0c6e32b537e1227420cf6912
Former-commit-id: 9d8372d8997449efe2b9f74538738f20dd3dfe1b
Former-commit-id: 02b17360c6232b1d58f174341d66e59b2d533815 [formerly 70a2be5169086d45ffa196c37019d4c012bc9ba7]
Former-commit-id: aaa99cb71780eb2620fb27ff23687d7717766b7a
Former-commit-id: 696d6f3c55166babfc3fb7c96b461f94540e7ddd
Former-commit-id: bc0a27c60ed1ef06eeb23e163a6126677897636e
Former-commit-id: 916f86bb74dc6d6fb85a80f5e755fb1b3b057352
Former-commit-id: 74007628b8fd0aa661e86df4293c72431e5478a8
---
 docs/zh/ecosystem-d2-crud/example.md    |  1 +
 src/menu/modules/demo-d2-crud.js        |  3 +-
 src/pages/demo/d2-crud/demo12/code.js   | 68 ++++++++++++++++++
 src/pages/demo/d2-crud/demo12/doc.md    |  1 +
 src/pages/demo/d2-crud/demo12/index.vue | 94 +++++++++++++++++++++++++
 src/router/routes.js.REMOVED.git-id     |  2 +-
 6 files changed, 167 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/demo/d2-crud/demo12/code.js
 create mode 100644 src/pages/demo/d2-crud/demo12/doc.md
 create mode 100644 src/pages/demo/d2-crud/demo12/index.vue

diff --git a/docs/zh/ecosystem-d2-crud/example.md b/docs/zh/ecosystem-d2-crud/example.md
index 6f45fd3f..a5f2b910 100644
--- a/docs/zh/ecosystem-d2-crud/example.md
+++ b/docs/zh/ecosystem-d2-crud/example.md
@@ -12,3 +12,4 @@
 | 多级表头 | [点我查看](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) |
diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index a7a7e1f4..8c9c41d6 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -14,6 +14,7 @@ export default {
     { path: `${pre}demo8`, title: '多级表头' },
     { path: `${pre}demo9`, title: '单选' },
     { path: `${pre}demo10`, title: '多选' },
-    { path: `${pre}demo11`, title: '排序' }
+    { path: `${pre}demo11`, title: '排序' },
+    { path: `${pre}demo12`, title: '筛选' }
   ])('/demo/d2-crud/')
 }
diff --git a/src/pages/demo/d2-crud/demo12/code.js b/src/pages/demo/d2-crud/demo12/code.js
new file mode 100644
index 00000000..19d6a6c0
--- /dev/null
+++ 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>`
diff --git a/src/pages/demo/d2-crud/demo12/doc.md b/src/pages/demo/d2-crud/demo12/doc.md
new file mode 100644
index 00000000..f4de8fc9
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo12/doc.md
@@ -0,0 +1 @@
+在 `columns` 中设置 `filters` `filterMethod` 属性即可开启该列的筛选，`filters` 是一个数组， `filterMethod` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。代码如下：
diff --git a/src/pages/demo/d2-crud/demo12/index.vue b/src/pages/demo/d2-crud/demo12/index.vue
new file mode 100644
index 00000000..3a291e1c
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo12/index.vue
@@ -0,0 +1,94 @@
+<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>
+
+<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 10307cbf..41a8e526 100644
--- a/src/router/routes.js.REMOVED.git-id
+++ b/src/router/routes.js.REMOVED.git-id
@@ -1 +1 @@
-f97628e615568020c3de348bdc064cb2a7dc3061
\ No newline at end of file
+d4bcc9f74429353eb00fc5a9e835c0e86842cdfa
\ No newline at end of file