drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #157 from rijn/master

Browse source 
Added ellipsis property to table column
This commit is contained in:
Aresn 2017-01-03 08:44:47 +08:00 • committed by GitHub
commit 2b67801dfb
3 changed files with 47 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/table/cell.vue
View file

@ -36,7 +36,8 @@
return [ return [
`${this.prefixCls}-cell`, `${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
} }
]; ];
} }

9
src/styles/components/table.less
View file

@ -138,6 +138,13 @@
white-space: normal; white-space: normal;
word-break: break-all; word-break: break-all;
box-sizing: border-box; box-sizing: border-box;
&-ellipsis {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
&-hidden{ &-hidden{
visibility: hidden; visibility: hidden;
@ -298,4 +305,4 @@
padding: 0; padding: 0;
} }
} }
} }

61
test/routers/table.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<i-button @click="changeFilter">改变filter</i-button> <i-button @click="changeFilter">改变filter</i-button>
<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis
<i-table border :columns="columns6" :data="data5"></i-table> <i-table border :columns="columns6" :data="data5"></i-table>
</template> </template>
<script> <script>
@ -62,33 +63,42 @@
filterMethod (value, row) { filterMethod (value, row) {
return row.address.indexOf(value) > -1; return row.address.indexOf(value) > -1;
} }
},
{
title: '长文本',
key: 'longText',
ellipsis: false
} }
], ],
data5: [ data5: [
// { {
// name: '王小明', name: '王小明',
// age: 18, age: 18,
// address: '北京市朝阳区芍药居', address: '北京市朝阳区芍药居',
// date: '2016-10-03' date: '2016-10-03',
// }, longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
// { },
// name: '张小刚', {
// age: 25, name: '张小刚',
// address: '北京市海淀区西二旗', age: 25,
// date: '2016-10-01' address: '北京市海淀区西二旗',
// }, date: '2016-10-01',
// { longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
// name: '李小红', },
// age: 30, {
// address: '上海市浦东新区世纪大道', name: '李小红',
// date: '2016-10-02' age: 30,
// }, address: '上海市浦东新区世纪大道',
// { date: '2016-10-02',
// name: '周小伟', longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
// age: 26, },
// address: '深圳市南山区深南大道', {
// date: '2016-10-04' name: '周小伟',
// } age: 26,
address: '深圳市南山区深南大道',
date: '2016-10-04',
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}
] ]
} }
}, },
@ -100,6 +110,9 @@
value: 2 value: 2
} }
] ]
},
switchCellEllipsis (status) {
this.columns6[5].ellipsis = status
} }
} }
} }