chenhaodong / mew-iview

Commit 2b67801dfb7f1ae8b3cf89a194a9e9479207e9e1

Authored by Aresn
Committed by GitHub
2 parents 49bef31b eedcba58

Merge pull request #157 from rijn/master 

Added ellipsis property to table column
Showing 3 changed files with 47 additions and 26 deletions   Show diff stats
Inline Side-by-side
src/components/table/cell.vue
  Show/Hide comments   View file @2b67801
@@ -36,7 +36,8 @@ @@ -36,7 +36,8 @@
36 return [ 36 return [
37 `${this.prefixCls}-cell`, 37 `${this.prefixCls}-cell`,
38 { 38 {
39 - [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right') 39 + [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
  40 + [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false
40 } 41 }
41 ]; 42 ];
42 } 43 }
src/styles/components/table.less
  Show/Hide comments   View file @2b67801
@@ -138,6 +138,13 @@ @@ -138,6 +138,13 @@
138 white-space: normal; 138 white-space: normal;
139 word-break: break-all; 139 word-break: break-all;
140 box-sizing: border-box; 140 box-sizing: border-box;
  141 +
  142 + &-ellipsis {
  143 + word-break: keep-all;
  144 + white-space: nowrap;
  145 + overflow: hidden;
  146 + text-overflow: ellipsis;
  147 + }
141 } 148 }
142 &-hidden{ 149 &-hidden{
143 visibility: hidden; 150 visibility: hidden;
@@ -298,4 +305,4 @@ @@ -298,4 +305,4 @@
298 padding: 0; 305 padding: 0;
299 } 306 }
300 } 307 }
301 -}  
302 \ No newline at end of file 308 \ No newline at end of file
  309 +}
test/routers/table.vue
  Show/Hide comments   View file @2b67801
1 <template> 1 <template>
2 <i-button @click="changeFilter">改变filter</i-button> 2 <i-button @click="changeFilter">改变filter</i-button>
  3 + <Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
3 <i-table border :columns="columns6" :data="data5"></i-table> 4 <i-table border :columns="columns6" :data="data5"></i-table>
4 </template> 5 </template>
5 <script> 6 <script>
@@ -62,33 +63,42 @@ @@ -62,33 +63,42 @@
62 filterMethod (value, row) { 63 filterMethod (value, row) {
63 return row.address.indexOf(value) > -1; 64 return row.address.indexOf(value) > -1;
64 } 65 }
  66 + },
  67 + {
  68 + title: '长文本',
  69 + key: 'longText',
  70 + ellipsis: false
65 } 71 }
66 ], 72 ],
67 data5: [ 73 data5: [
68 -// {  
69 -// name: '王小明',  
70 -// age: 18,  
71 -// address: '北京市朝阳区芍药居',  
72 -// date: '2016-10-03'  
73 -// },  
74 -// {  
75 -// name: '张小刚',  
76 -// age: 25,  
77 -// address: '北京市海淀区西二旗',  
78 -// date: '2016-10-01'  
79 -// },  
80 -// {  
81 -// name: '李小红',  
82 -// age: 30,  
83 -// address: '上海市浦东新区世纪大道',  
84 -// date: '2016-10-02'  
85 -// },  
86 -// {  
87 -// name: '周小伟',  
88 -// age: 26,  
89 -// address: '深圳市南山区深南大道',  
90 -// date: '2016-10-04'  
91 -// } 74 + {
  75 + name: '王小明',
  76 + age: 18,
  77 + address: '北京市朝阳区芍药居',
  78 + date: '2016-10-03',
  79 + longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  80 + },
  81 + {
  82 + name: '张小刚',
  83 + age: 25,
  84 + address: '北京市海淀区西二旗',
  85 + date: '2016-10-01',
  86 + longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  87 + },
  88 + {
  89 + name: '李小红',
  90 + age: 30,
  91 + address: '上海市浦东新区世纪大道',
  92 + date: '2016-10-02',
  93 + longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  94 + },
  95 + {
  96 + name: '周小伟',
  97 + age: 26,
  98 + address: '深圳市南山区深南大道',
  99 + date: '2016-10-04',
  100 + longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  101 + }
92 ] 102 ]
93 } 103 }
94 }, 104 },
@@ -100,6 +110,9 @@ @@ -100,6 +110,9 @@
100 value: 2 110 value: 2
101 } 111 }
102 ] 112 ]
  113 + },
  114 + switchCellEllipsis (status) {
  115 + this.columns6[5].ellipsis = status
103 } 116 }
104 } 117 }
105 } 118 }