Added ellipsis property to table column

Rijn
1 parent 49bef31b
Showing 3 changed files with 47 additions and 26 deletions Show diff stats
src/components/table/cell.vue
src/styles/components/table.less
test/routers/table.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
                     }
                 ];
             }
@@ -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
+}
 <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
             }
         }
     }