From fc3e16cf01b61f516c633424cf8454c9b234a14b Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Fri, 29 Jun 2018 09:27:32 +0800
Subject: [PATCH] update Table selection style, close #3159

---
 examples/routers/table.vue          | 281 +++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/table/cell.vue       |   3 ++-
 src/components/table/table-head.vue |   3 ++-
 src/styles/components/table.less    |   7 +++++++
 4 files changed, 44 insertions(+), 250 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index d3e7bbe..1cafe53 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,280 +1,65 @@
 <template>
     <div>
-        <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
-        <br>
-        <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
-        <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
-        <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button>
+        <Table border ref="selection" :columns="columns4" :data="data1"></Table>
+        <br><br>
+        <Button @click="handleSelectAll(true)">Set all selected</Button>
+        <Button @click="handleSelectAll(false)">Cancel all selected</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                columns8: [
+                columns4: [
                     {
-                        "title": "Name",
-                        "key": "name",
-                        "fixed": "left",
-                        "width": 200
+                        type: 'selection',
+                        width: 60,
+                        align: 'center'
                     },
                     {
-                        "title": "Show",
-                        "key": "show",
-                        "width": 150,
-                        "sortable": true,
-                        filters: [
-                            {
-                                label: 'Greater than 4000',
-                                value: 1
-                            },
-                            {
-                                label: 'Less than 4000',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.show > 4000;
-                            } else if (value === 2) {
-                                return row.show < 4000;
-                            }
-                        }
+                        title: 'Name',
+                        key: 'name'
                     },
                     {
-                        "title": "Weak",
-                        "key": "weak",
-                        "width": 150,
-                        "sortable": true
+                        title: 'Age',
+                        key: 'age'
                     },
                     {
-                        "title": "Signin",
-                        "key": "signin",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Click",
-                        "key": "click",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Active",
-                        "key": "active",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "7, retained",
-                        "key": "day7",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "30, retained",
-                        "key": "day30",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "The next day left",
-                        "key": "tomorrow",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Day Active",
-                        "key": "day",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Week Active",
-                        "key": "week",
-                        "width": 150,
-                        "sortable": true
-                    },
-                    {
-                        "title": "Month Active",
-                        "key": "month",
-                        "width": 150,
-                        "sortable": true
+                        title: 'Address',
+                        key: 'address'
                     }
                 ],
-                data7: [
-                    {
-                        "name": "Name1",
-                        "fav": 0,
-                        "show": 7302,
-                        "weak": 5627,
-                        "signin": 1563,
-                        "click": 4254,
-                        "active": 1438,
-                        "day7": 274,
-                        "day30": 285,
-                        "tomorrow": 1727,
-                        "day": 558,
-                        "week": 4440,
-                        "month": 5610
-                    },
-                    {
-                        "name": "Name2",
-                        "fav": 0,
-                        "show": 4720,
-                        "weak": 4086,
-                        "signin": 3792,
-                        "click": 8690,
-                        "active": 8470,
-                        "day7": 8172,
-                        "day30": 5197,
-                        "tomorrow": 1684,
-                        "day": 2593,
-                        "week": 2507,
-                        "month": 1537
-                    },
-                    {
-                        "name": "Name3",
-                        "fav": 0,
-                        "show": 7181,
-                        "weak": 8007,
-                        "signin": 8477,
-                        "click": 1879,
-                        "active": 16,
-                        "day7": 2249,
-                        "day30": 3450,
-                        "tomorrow": 377,
-                        "day": 1561,
-                        "week": 3219,
-                        "month": 1588
-                    },
-                    {
-                        "name": "Name4",
-                        "fav": 0,
-                        "show": 9911,
-                        "weak": 8976,
-                        "signin": 8807,
-                        "click": 8050,
-                        "active": 7668,
-                        "day7": 1547,
-                        "day30": 2357,
-                        "tomorrow": 7278,
-                        "day": 5309,
-                        "week": 1655,
-                        "month": 9043
-                    },
-                    {
-                        "name": "Name5",
-                        "fav": 0,
-                        "show": 934,
-                        "weak": 1394,
-                        "signin": 6463,
-                        "click": 5278,
-                        "active": 9256,
-                        "day7": 209,
-                        "day30": 3563,
-                        "tomorrow": 8285,
-                        "day": 1230,
-                        "week": 4840,
-                        "month": 9908
-                    },
-                    {
-                        "name": "Name6",
-                        "fav": 0,
-                        "show": 6856,
-                        "weak": 1608,
-                        "signin": 457,
-                        "click": 4949,
-                        "active": 2909,
-                        "day7": 4525,
-                        "day30": 6171,
-                        "tomorrow": 1920,
-                        "day": 1966,
-                        "week": 904,
-                        "month": 6851
-                    },
+                data1: [
                     {
-                        "name": "Name7",
-                        "fav": 0,
-                        "show": 5107,
-                        "weak": 6407,
-                        "signin": 4166,
-                        "click": 7970,
-                        "active": 1002,
-                        "day7": 8701,
-                        "day30": 9040,
-                        "tomorrow": 7632,
-                        "day": 4061,
-                        "week": 4359,
-                        "month": 3676
+                        name: 'John Brown',
+                        age: 18,
+                        address: 'New York No. 1 Lake Park',
+                        date: '2016-10-03'
                     },
                     {
-                        "name": "Name8",
-                        "fav": 0,
-                        "show": 862,
-                        "weak": 6520,
-                        "signin": 6696,
-                        "click": 3209,
-                        "active": 6801,
-                        "day7": 6364,
-                        "day30": 6850,
-                        "tomorrow": 9408,
-                        "day": 2481,
-                        "week": 1479,
-                        "month": 2346
+                        name: 'Jim Green',
+                        age: 24,
+                        address: 'London No. 1 Lake Park',
+                        date: '2016-10-01'
                     },
                     {
-                        "name": "Name9",
-                        "fav": 0,
-                        "show": 567,
-                        "weak": 5859,
-                        "signin": 128,
-                        "click": 6593,
-                        "active": 1971,
-                        "day7": 7596,
-                        "day30": 3546,
-                        "tomorrow": 6641,
-                        "day": 1611,
-                        "week": 5534,
-                        "month": 3190
+                        name: 'Joe Black',
+                        age: 30,
+                        address: 'Sydney No. 1 Lake Park',
+                        date: '2016-10-02'
                     },
                     {
-                        "name": "Name10",
-                        "fav": 0,
-                        "show": 3651,
-                        "weak": 1819,
-                        "signin": 4595,
-                        "click": 7499,
-                        "active": 7405,
-                        "day7": 8710,
-                        "day30": 5518,
-                        "tomorrow": 428,
-                        "day": 9768,
-                        "week": 2864,
-                        "month": 5811
+                        name: 'Jon Snow',
+                        age: 26,
+                        address: 'Ottawa No. 2 Lake Park',
+                        date: '2016-10-04'
                     }
                 ]
             }
         },
         methods: {
-            exportData (type) {
-                if (type === 1) {
-                    this.$refs.table.exportCsv({
-                        filename: 'The original data'
-                    });
-                } else if (type === 2) {
-                    this.$refs.table.exportCsv({
-                        filename: 'Sorting and filtering data',
-                        original: false
-                    });
-                } else if (type === 3) {
-                    this.$refs.table.exportCsv({
-                        filename: 'Custom data',
-                        columns: this.columns8.filter((col, index) => index < 4),
-                        data: this.data7.filter((data, index) => index < 4)
-                    });
-                }
+            handleSelectAll (status) {
+                this.$refs.selection.selectAll(status);
             }
         }
     }
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 5b1e6ff..ef97667 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -55,7 +55,8 @@
                     {
                         [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
                         [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
-                        [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
+                        [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand',
+                        [`${this.prefixCls}-cell-with-selection`]: this.renderType === 'selection'
                     }
                 ];
             },
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 583ddc0..006e9b1 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -128,7 +128,8 @@
                 return [
                     `${this.prefixCls}-cell`,
                     {
-                        [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')
+                        [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'),
+                        [`${this.prefixCls}-cell-with-selection`]: column.type === 'selection'
                     }
                 ];
             },
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index ed826a7..94ab2ba 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -179,6 +179,13 @@
             cursor: pointer;
             user-select: none;
         }
+
+        // #3159
+        &-with-selection{
+            .@{checkbox-prefix-cls}-wrapper{
+                margin-right: 0;
+            }
+        }
     }
     &-hidden{
         visibility: hidden;
--
libgit2 0.21.4