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 [
`${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
}
];
}

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

@ -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;

61
test/routers/table.vue
View file

@ -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
}
}
}