From 6c634aa6319f6173ea7765be40840fefdf2676f0 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Mon, 23 Oct 2017 19:01:47 +0800
Subject: [PATCH] fixed #2078

---
 examples/routers/table.vue     | 603 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/table/table.vue |   2 ++
 2 files changed, 358 insertions(+), 247 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 42db973..e5cd87b 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -109,292 +109,401 @@
     <!--}-->
 <!--</script>-->
 
-<style scoped>
-    .layout{
-        border: 1px solid #d7dde4;
-        background: #f5f7f9;
-        position: relative;
-        border-radius: 4px;
-        overflow: hidden;
-    }
-    .layout-breadcrumb{
-        padding: 10px 15px 0;
-    }
-    .layout-content{
-        min-height: 200px;
-        margin: 15px;
-        overflow: hidden;
-        background: #fff;
-        border-radius: 4px;
-    }
-    .layout-content-main{
-        padding: 10px;
-    }
-    .layout-copy{
-        text-align: center;
-        padding: 10px 0 20px;
-        color: #9ea7b4;
-    }
-    .layout-menu-left{
-        background: #464c5b;
-    }
-    .layout-header{
-        height: 60px;
-        background: #fff;
-        box-shadow: 0 1px 1px rgba(0,0,0,.1);
-    }
-    .layout-logo-left{
-        width: 90%;
-        height: 30px;
-        background: #5b6270;
-        border-radius: 3px;
-        margin: 15px auto;
-    }
-    .layout-ceiling-main a{
-        color: #9ba7b5;
-    }
-    .layout-hide-text .layout-text{
-        display: none;
-    }
-    .ivu-col{
-        /*transition: width .2s ease-in-out;*/
-    }
-</style>
+<!--<style scoped>-->
+    <!--.layout{-->
+        <!--border: 1px solid #d7dde4;-->
+        <!--background: #f5f7f9;-->
+        <!--position: relative;-->
+        <!--border-radius: 4px;-->
+        <!--overflow: hidden;-->
+    <!--}-->
+    <!--.layout-breadcrumb{-->
+        <!--padding: 10px 15px 0;-->
+    <!--}-->
+    <!--.layout-content{-->
+        <!--min-height: 200px;-->
+        <!--margin: 15px;-->
+        <!--overflow: hidden;-->
+        <!--background: #fff;-->
+        <!--border-radius: 4px;-->
+    <!--}-->
+    <!--.layout-content-main{-->
+        <!--padding: 10px;-->
+    <!--}-->
+    <!--.layout-copy{-->
+        <!--text-align: center;-->
+        <!--padding: 10px 0 20px;-->
+        <!--color: #9ea7b4;-->
+    <!--}-->
+    <!--.layout-menu-left{-->
+        <!--background: #464c5b;-->
+    <!--}-->
+    <!--.layout-header{-->
+        <!--height: 60px;-->
+        <!--background: #fff;-->
+        <!--box-shadow: 0 1px 1px rgba(0,0,0,.1);-->
+    <!--}-->
+    <!--.layout-logo-left{-->
+        <!--width: 90%;-->
+        <!--height: 30px;-->
+        <!--background: #5b6270;-->
+        <!--border-radius: 3px;-->
+        <!--margin: 15px auto;-->
+    <!--}-->
+    <!--.layout-ceiling-main a{-->
+        <!--color: #9ba7b5;-->
+    <!--}-->
+    <!--.layout-hide-text .layout-text{-->
+        <!--display: none;-->
+    <!--}-->
+    <!--.ivu-col{-->
+        <!--/*transition: width .2s ease-in-out;*/-->
+    <!--}-->
+<!--</style>-->
+<!--<template>-->
+    <!--<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">-->
+        <!--<Row type="flex">-->
+            <!--<Col :span="spanLeft" class="layout-menu-left">-->
+                <!--<Menu active-name="1" theme="dark" width="auto">-->
+                    <!--<div class="layout-logo-left"></div>-->
+                    <!--<MenuItem name="1">-->
+                        <!--<Icon type="ios-navigate" :size="iconSize"></Icon>-->
+                        <!--<span class="layout-text">选项 1</span>-->
+                    <!--</MenuItem>-->
+                    <!--<MenuItem name="2">-->
+                        <!--<Icon type="ios-keypad" :size="iconSize"></Icon>-->
+                        <!--<span class="layout-text">选项 2</span>-->
+                    <!--</MenuItem>-->
+                    <!--<MenuItem name="3">-->
+                        <!--<Icon type="ios-analytics" :size="iconSize"></Icon>-->
+                        <!--<span class="layout-text">选项 3</span>-->
+                    <!--</MenuItem>-->
+                <!--</Menu>-->
+            <!--</Col>-->
+            <!--<Col :span="spanRight">-->
+                <!--<div class="layout-header">-->
+                    <!--<Button type="text" @click="toggleClick">-->
+                        <!--<Icon type="navicon" size="32"></Icon>-->
+                    <!--</Button>-->
+                <!--</div>-->
+                <!--<div class="layout-breadcrumb">-->
+                    <!--<Breadcrumb>-->
+                        <!--<BreadcrumbItem href="#">首页</BreadcrumbItem>-->
+                        <!--<BreadcrumbItem href="#">应用中心</BreadcrumbItem>-->
+                        <!--<BreadcrumbItem>某应用</BreadcrumbItem>-->
+                    <!--</Breadcrumb>-->
+                <!--</div>-->
+                <!--<div class="layout-content">-->
+                    <!--<div class="layout-content-main">-->
+                        <!--<Table stripe :columns="columns1" :data="data1"></Table>-->
+                    <!--</div>-->
+                    <!--<hr style="margin: 10px 0;" />-->
+                    <!--<div class="layout-content-main">-->
+                        <!--<Table stripe :columns="columns2" :data="data2" ref="csvTable" @on-row-click="cc" />-->
+                        <!--<i-button type="primary" size="large" @click="exportCSV">-->
+                            <!--<icon type="ios-download-outline"></icon> Export to CSV-->
+                        <!--</i-button>-->
+                    <!--</div>-->
+                <!--</div>-->
+            <!--</Col>-->
+        <!--</Row>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--spanLeft: 5,-->
+                <!--spanRight: 19,-->
+                <!--columns1: [-->
+                    <!--{-->
+                        <!--title: '姓名',-->
+                        <!--key: 'name'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '年龄',-->
+                        <!--key: 'age'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '地址',-->
+                        <!--key: 'address'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '姓名',-->
+                        <!--key: 'name'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '年龄',-->
+                        <!--key: 'age'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '地址',-->
+                        <!--key: 'address'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '姓名',-->
+                        <!--key: 'name'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '年龄',-->
+                        <!--key: 'age'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '地址',-->
+                        <!--key: 'address'-->
+                    <!--}-->
+                <!--],-->
+                <!--data1: [-->
+                    <!--{-->
+                        <!--name: '王小明',-->
+                        <!--age: 18,-->
+                        <!--address: '北京市朝阳区芍药居'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '张小刚',-->
+                        <!--age: 25,-->
+                        <!--address: '北京市海淀区西二旗'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '李小红',-->
+                        <!--age: 30,-->
+                        <!--address: '上海市浦东新区世纪大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '周小伟',-->
+                        <!--age: 26,-->
+                        <!--address: '深圳市南山区深南大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '王小明',-->
+                        <!--age: 18,-->
+                        <!--address: '北京市朝阳区芍药居'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '张小刚',-->
+                        <!--age: 25,-->
+                        <!--address: '北京市海淀区西二旗'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '李小红',-->
+                        <!--age: 30,-->
+                        <!--address: '上海市浦东新区世纪大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '周小伟',-->
+                        <!--age: 26,-->
+                        <!--address: '深圳市南山区深南大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '王小明',-->
+                        <!--age: 18,-->
+                        <!--address: '北京市朝阳区芍药居'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '张小刚',-->
+                        <!--age: 25,-->
+                        <!--address: '北京市海淀区西二旗'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '李小红',-->
+                        <!--age: 30,-->
+                        <!--address: '上海市浦东新区世纪大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '周小伟',-->
+                        <!--age: 26,-->
+                        <!--address: '深圳市南山区深南大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '王小明',-->
+                        <!--age: 18,-->
+                        <!--address: '北京市朝阳区芍药居'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '张小刚',-->
+                        <!--age: 25,-->
+                        <!--address: '北京市海淀区西二旗'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '李小红',-->
+                        <!--age: 30,-->
+                        <!--address: '上海市浦东新区世纪大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '周小伟',-->
+                        <!--age: 26,-->
+                        <!--address: '深圳市南山区深南大道'-->
+                    <!--}-->
+                <!--],-->
+                <!--columns2: [-->
+                    <!--{-->
+                        <!--title: '姓名',-->
+                        <!--key: 'name'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '年龄',-->
+                        <!--key: 'age'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--title: '地址',-->
+                        <!--key: 'address',-->
+                        <!--render: (h) => {-->
+                            <!--return h('Button', {-->
+                                <!--nativeOn: {-->
+                                    <!--click: (event) => {-->
+                                        <!--console.log(2)-->
+                                        <!--event.stopPropagation();-->
+                                    <!--}-->
+                                <!--}-->
+                            <!--}, 'click')-->
+                        <!--}-->
+                    <!--}-->
+                <!--],-->
+                <!--data2: [-->
+                    <!--{-->
+                        <!--name: '王小明',-->
+                        <!--age: 18,-->
+                        <!--address: '北京市朝\n阳区芍药居'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '张小刚',-->
+                        <!--age: 25,-->
+                        <!--address: '北京市海,淀区西二旗'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '李小红',-->
+                        <!--age: 30,-->
+                        <!--address: '上海市浦东\r新区世纪大道'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--name: '周小伟',-->
+                        <!--age: 26,-->
+                        <!--address: '深圳市南山区深南大道'-->
+                    <!--}-->
+                <!--]-->
+            <!--};-->
+        <!--},-->
+        <!--computed: {-->
+            <!--iconSize () {-->
+                <!--return this.spanLeft === 5 ? 14 : 24;-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--toggleClick () {-->
+                <!--if (this.spanLeft === 5) {-->
+                    <!--this.spanLeft = 2;-->
+                    <!--this.spanRight = 22;-->
+                <!--} else {-->
+                    <!--this.spanLeft = 5;-->
+                    <!--this.spanRight = 19;-->
+                <!--}-->
+            <!--},-->
+            <!--exportCSV () {-->
+                <!--this.$refs.csvTable.exportCsv({-->
+                    <!--filename: '原始数据',-->
+                    <!--separator: ';',-->
+                    <!--quoted: true-->
+                <!--});-->
+            <!--},-->
+            <!--cc () {-->
+                <!--console.log(1)-->
+            <!--}-->
+        <!--}-->
+    <!--};-->
+<!--</script>-->
+
 <template>
-    <div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
-        <Row type="flex">
-            <Col :span="spanLeft" class="layout-menu-left">
-                <Menu active-name="1" theme="dark" width="auto">
-                    <div class="layout-logo-left"></div>
-                    <MenuItem name="1">
-                        <Icon type="ios-navigate" :size="iconSize"></Icon>
-                        <span class="layout-text">选项 1</span>
-                    </MenuItem>
-                    <MenuItem name="2">
-                        <Icon type="ios-keypad" :size="iconSize"></Icon>
-                        <span class="layout-text">选项 2</span>
-                    </MenuItem>
-                    <MenuItem name="3">
-                        <Icon type="ios-analytics" :size="iconSize"></Icon>
-                        <span class="layout-text">选项 3</span>
-                    </MenuItem>
-                </Menu>
-            </Col>
-            <Col :span="spanRight">
-                <div class="layout-header">
-                    <Button type="text" @click="toggleClick">
-                        <Icon type="navicon" size="32"></Icon>
-                    </Button>
-                </div>
-                <div class="layout-breadcrumb">
-                    <Breadcrumb>
-                        <BreadcrumbItem href="#">首页</BreadcrumbItem>
-                        <BreadcrumbItem href="#">应用中心</BreadcrumbItem>
-                        <BreadcrumbItem>某应用</BreadcrumbItem>
-                    </Breadcrumb>
-                </div>
-                <div class="layout-content">
-                    <div class="layout-content-main">
-                        <Table stripe :columns="columns1" :data="data1"></Table>
-                    </div>
-                    <hr style="margin: 10px 0;" />
-                    <div class="layout-content-main">
-                        <Table stripe :columns="columns2" :data="data2" ref="csvTable" />
-                        <i-button type="primary" size="large" @click="exportCSV">
-                            <icon type="ios-download-outline"></icon> Export to CSV
-                        </i-button>
-                    </div>
-                </div>
-            </Col>
-        </Row>
-    </div>
+    <Table border :columns="columns6" :data="data5" @on-filter-change="cc"></Table>
 </template>
 <script>
     export default {
         data () {
             return {
-                spanLeft: 5,
-                spanRight: 19,
-                columns1: [
-                    {
-                        title: '姓名',
-                        key: 'name'
-                    },
-                    {
-                        title: '年龄',
-                        key: 'age'
-                    },
-                    {
-                        title: '地址',
-                        key: 'address'
-                    },
-                    {
-                        title: '姓名',
-                        key: 'name'
-                    },
-                    {
-                        title: '年龄',
-                        key: 'age'
-                    },
-                    {
-                        title: '地址',
-                        key: 'address'
-                    },
-                    {
-                        title: '姓名',
-                        key: 'name'
-                    },
-                    {
-                        title: '年龄',
-                        key: 'age'
-                    },
+                columns6: [
                     {
-                        title: '地址',
-                        key: 'address'
-                    }
-                ],
-                data1: [
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
-                    },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗'
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
+                        title: '日期',
+                        key: 'date'
                     },
                     {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
-                    },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗'
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
-                    },
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
-                    },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗'
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
-                    },
-                    {
-                        name: '王小明',
-                        age: 18,
-                        address: '北京市朝阳区芍药居'
-                    },
-                    {
-                        name: '张小刚',
-                        age: 25,
-                        address: '北京市海淀区西二旗'
-                    },
-                    {
-                        name: '李小红',
-                        age: 30,
-                        address: '上海市浦东新区世纪大道'
-                    },
-                    {
-                        name: '周小伟',
-                        age: 26,
-                        address: '深圳市南山区深南大道'
-                    }
-                ],
-                columns2: [
-                    {
                         title: '姓名',
                         key: 'name'
                     },
                     {
                         title: '年龄',
-                        key: 'age'
+                        key: 'age',
+                        filters: [
+                            {
+                                label: '大于25岁',
+                                value: 1
+                            },
+                            {
+                                label: '小于25岁',
+                                value: 2
+                            }
+                        ],
+                        filterMultiple: false,
+                        filterMethod (value, row) {
+                            if (value === 1) {
+                                return row.age > 25;
+                            } else if (value === 2) {
+                                return row.age < 25;
+                            }
+                        }
                     },
                     {
                         title: '地址',
-                        key: 'address'
+                        key: 'address',
+                        filters: [
+                            {
+                                label: '北京',
+                                value: '北京'
+                            },
+                            {
+                                label: '上海',
+                                value: '上海'
+                            },
+                            {
+                                label: '深圳',
+                                value: '深圳'
+                            }
+                        ],
+                        filterMethod (value, row) {
+                            return row.address.indexOf(value) > -1;
+                        }
                     }
                 ],
-                data2: [
+                data5: [
                     {
                         name: '王小明',
                         age: 18,
-                        address: '北京市朝\n阳区芍药居'
+                        address: '北京市朝阳区芍药居',
+                        date: '2016-10-03'
                     },
                     {
                         name: '张小刚',
                         age: 25,
-                        address: '北京市海,淀区西二旗'
+                        address: '北京市海淀区西二旗',
+                        date: '2016-10-01'
                     },
                     {
                         name: '李小红',
                         age: 30,
-                        address: '上海市浦东\r新区世纪大道'
+                        address: '上海市浦东新区世纪大道',
+                        date: '2016-10-02'
                     },
                     {
                         name: '周小伟',
                         age: 26,
-                        address: '深圳市南山区深南大道'
+                        address: '深圳市南山区深南大道',
+                        date: '2016-10-04'
                     }
                 ]
-            };
-        },
-        computed: {
-            iconSize () {
-                return this.spanLeft === 5 ? 14 : 24;
             }
         },
         methods: {
-            toggleClick () {
-                if (this.spanLeft === 5) {
-                    this.spanLeft = 2;
-                    this.spanRight = 22;
-                } else {
-                    this.spanLeft = 5;
-                    this.spanRight = 19;
-                }
-            },
-            exportCSV () {
-                this.$refs.csvTable.exportCsv({
-                    filename: '原始数据',
-                    separator: ';',
-                    quoted: true
-                });
+            cc (dd) {
+                console.log(dd);
             }
         }
-    };
+    }
 </script>
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 0cc801e..6787078 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -574,6 +574,7 @@
 
                 this.cloneColumns[index]._isFiltered = true;
                 this.cloneColumns[index]._filterVisible = false;
+                this.$emit('on-filter-change', column);
             },
             handleFilterSelect (index, value) {
                 this.cloneColumns[index]._filterChecked = [value];
@@ -587,6 +588,7 @@
                 let filterData = this.makeDataWithSort();
                 filterData = this.filterOtherData(filterData, index);
                 this.rebuildData = filterData;
+                this.$emit('on-filter-change', this.cloneColumns[index]);
             },
             makeData () {
                 let data = deepCopy(this.data);
--
libgit2 0.21.4