From a000231ec2eb1fe81b68f117680bc51ca32ac016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 25 Jun 2018 20:21:01 +0800
Subject: [PATCH] update Table sort style

---
 examples/routers/table.vue   | 157 +++++++----------------------------
 src/styles/mixins/caret.less |   3 +-
 2 files changed, 33 insertions(+), 127 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index ca567be6..bbf3f03f 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,150 +1,57 @@
 <template>
-    <div>
-        <Table :data="tableData1" :columns="tableColumns1" stripe></Table>
-        <div style="margin: 10px;overflow: hidden">
-            <div style="float: right;">
-                <Page :total="100" :current="1" @on-change="changePage"></Page>
-            </div>
-        </div>
-    </div>
+    <Table border :columns="columns5" :data="data5"></Table>
 </template>
 <script>
     export default {
         data () {
             return {
-                tableData1: this.mockTableData1(),
-                tableColumns1: [
+                columns5: [
+                    {
+                        title: 'Date',
+                        key: 'date',
+                        sortable: true
+                    },
                     {
                         title: 'Name',
                         key: 'name'
                     },
                     {
-                        title: 'Status',
-                        key: 'status',
-                        render: (h, params) => {
-                            const row = params.row;
-                            const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red';
-                            const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail';
-
-                            return h('Tag', {
-                                props: {
-                                    type: 'dot',
-                                    color: color
-                                }
-                            }, text);
-                        }
+                        title: 'Age',
+                        key: 'age',
+                        sortable: true
                     },
                     {
-                        title: 'Portrayal',
-                        key: 'portrayal',
-                        render: (h, params) => {
-                            return h('Poptip', {
-                                props: {
-                                    trigger: 'hover',
-                                    title: params.row.portrayal.length + 'portrayals',
-                                    placement: 'bottom'
-                                }
-                            }, [
-                                h('Tag', params.row.portrayal.length),
-                                h('div', {
-                                    slot: 'content'
-                                }, [
-                                    h('ul', this.tableData1[params.index].portrayal.map(item => {
-                                        return h('li', {
-                                            style: {
-                                                textAlign: 'center',
-                                                padding: '4px'
-                                            }
-                                        }, item)
-                                    }))
-                                ])
-                            ]);
-                        }
+                        title: 'Address',
+                        key: 'address'
+                    }
+                ],
+                data5: [
+                    {
+                        name: 'John Brown',
+                        age: 18,
+                        address: 'New York No. 1 Lake Park',
+                        date: '2016-10-03'
                     },
                     {
-                        title: 'People',
-                        key: 'people',
-                        render: (h, params) => {
-                            return h('Poptip', {
-                                props: {
-                                    trigger: 'hover',
-                                    title: params.row.people.length + 'customers',
-                                    placement: 'bottom'
-                                }
-                            }, [
-                                h('Tag', params.row.people.length),
-                                h('div', {
-                                    slot: 'content'
-                                }, [
-                                    h('ul', this.tableData1[params.index].people.map(item => {
-                                        return h('li', {
-                                            style: {
-                                                textAlign: 'center',
-                                                padding: '4px'
-                                            }
-                                        }, item.n + '：' + item.c + 'People')
-                                    }))
-                                ])
-                            ]);
-                        }
+                        name: 'Jim Green',
+                        age: 24,
+                        address: 'London No. 1 Lake Park',
+                        date: '2016-10-01'
                     },
                     {
-                        title: 'Sampling Time',
-                        key: 'time',
-                        render: (h, params) => {
-                            return h('div', 'Almost' + params.row.time + 'days');
-                        }
+                        name: 'Joe Black',
+                        age: 30,
+                        address: 'Sydney No. 1 Lake Park',
+                        date: '2016-10-02'
                     },
                     {
-                        title: 'Updated Time',
-                        key: 'update',
-                        render: (h, params) => {
-                            return h('div', this.formatDate(this.tableData1[params.index].update));
-                        }
+                        name: 'Jon Snow',
+                        age: 26,
+                        address: 'Ottawa No. 2 Lake Park',
+                        date: '2016-10-04'
                     }
                 ]
             }
-        },
-        methods: {
-            mockTableData1 () {
-                let data = [];
-                for (let i = 0; i < 10; i++) {
-                    data.push({
-                        name: 'Business' + Math.floor(Math.random () * 100 + 1),
-                        status: Math.floor(Math.random () * 3 + 1),
-                        portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
-                        people: [
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            },
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            },
-                            {
-                                n: 'People' + Math.floor(Math.random () * 100 + 1),
-                                c: Math.floor(Math.random () * 1000000 + 100000)
-                            }
-                        ],
-                        time: Math.floor(Math.random () * 7 + 1),
-                        update: new Date()
-                    })
-                }
-                return data;
-            },
-            formatDate (date) {
-                const y = date.getFullYear();
-                let m = date.getMonth() + 1;
-                m = m < 10 ? '0' + m : m;
-                let d = date.getDate();
-                d = d < 10 ? ('0' + d) : d;
-                return y + '-' + m + '-' + d;
-            },
-            changePage () {
-                // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
-                this.tableData1 = this.mockTableData1();
-            }
         }
     }
 </script>
diff --git a/src/styles/mixins/caret.less b/src/styles/mixins/caret.less
index 9a880492..43b05c87 100644
--- a/src/styles/mixins/caret.less
+++ b/src/styles/mixins/caret.less
@@ -1,9 +1,8 @@
 // sortable
 .sortable() {
     display: inline-block;
-    width: 9px;
+    width: 14px;
     height: 12px;
-    margin-left: 4px;
     margin-top: -1px;
     vertical-align: middle;
     overflow: hidden;