From eedcba586c535e1517dfb1fc9e6b2f4ac22ea520 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 2 Jan 2017 13:42:32 -0600
Subject: [PATCH] Added ellipsis property to table column

---
 src/components/table/cell.vue    |  3 ++-
 src/styles/components/table.less |  9 ++++++++-
 test/routers/table.vue           | 61 +++++++++++++++++++++++++++++++++++++------------------------
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 2c17edb..cbe7959 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -36,7 +36,8 @@
                 return [
                     `${this.prefixCls}-cell`,
                     {
-                        [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right')
+                        [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
+                        [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false
                     }
                 ];
             }
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index b6030e2..f6a47e4 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -138,6 +138,13 @@
         white-space: normal;
         word-break: break-all;
         box-sizing: border-box;
+
+        &-ellipsis {
+            word-break: keep-all;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
     &-hidden{
         visibility: hidden;
@@ -298,4 +305,4 @@
             padding: 0;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 844a9d0..ed16185 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -1,5 +1,6 @@
 <template>
     <i-button @click="changeFilter">改变filter</i-button>
+    <Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
     <i-table border :columns="columns6" :data="data5"></i-table>
 </template>
 <script>
@@ -62,33 +63,42 @@
                         filterMethod (value, row) {
                             return row.address.indexOf(value) > -1;
                         }
+                    },
+                    {
+                      title: '长文本',
+                      key: 'longText',
+                      ellipsis: false
                     }
                 ],
                 data5: [
-//                    {
-//                        name: '王小明',
-//                        age: 18,
-//                        address: '北京市朝阳区芍药居',
-//                        date: '2016-10-03'
-//                    },
-//                    {
-//                        name: '张小刚',
-//                        age: 25,
-//                        address: '北京市海淀区西二旗',
-//                        date: '2016-10-01'
-//                    },
-//                    {
-//                        name: '李小红',
-//                        age: 30,
-//                        address: '上海市浦东新区世纪大道',
-//                        date: '2016-10-02'
-//                    },
-//                    {
-//                        name: '周小伟',
-//                        age: 26,
-//                        address: '深圳市南山区深南大道',
-//                        date: '2016-10-04'
-//                    }
+                   {
+                       name: '王小明',
+                       age: 18,
+                       address: '北京市朝阳区芍药居',
+                       date: '2016-10-03',
+                       longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+                   },
+                   {
+                       name: '张小刚',
+                       age: 25,
+                       address: '北京市海淀区西二旗',
+                       date: '2016-10-01',
+                       longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+                   },
+                   {
+                       name: '李小红',
+                       age: 30,
+                       address: '上海市浦东新区世纪大道',
+                       date: '2016-10-02',
+                       longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+                   },
+                   {
+                       name: '周小伟',
+                       age: 26,
+                       address: '深圳市南山区深南大道',
+                       date: '2016-10-04',
+                       longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+                   }
                 ]
             }
         },
@@ -100,6 +110,9 @@
                         value: 2
                     }
                 ]
+            },
+            switchCellEllipsis (status) {
+                this.columns6[5].ellipsis = status
             }
         }
     }
--
libgit2 0.21.4