other / 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 36 return [
37 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 138 white-space: normal;
139 139 word-break: break-all;
140 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 149 &-hidden{
143 150 visibility: hidden;
... ... @@ -298,4 +305,4 @@
298 305 padding: 0;
299 306 }
300 307 }
301   -}
302 308 \ No newline at end of file
  309 +}
... ...
test/routers/table.vue
  Show/Hide comments   View file @2b67801
1 1 <template>
2 2 <i-button @click="changeFilter">改变filter</i-button>
  3 + <Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
3 4 <i-table border :columns="columns6" :data="data5"></i-table>
4 5 </template>
5 6 <script>
... ... @@ -62,33 +63,42 @@
62 63 filterMethod (value, row) {
63 64 return row.address.indexOf(value) > -1;
64 65 }
  66 + },
  67 + {
  68 + title: '长文本',
  69 + key: 'longText',
  70 + ellipsis: false
65 71 }
66 72 ],
67 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 110 value: 2
101 111 }
102 112 ]
  113 + },
  114 + switchCellEllipsis (status) {
  115 + this.columns6[5].ellipsis = status
103 116 }
104 117 }
105 118 }
... ...