From eedcba586c535e1517dfb1fc9e6b2f4ac22ea520 Mon Sep 17 00:00:00 2001
From: Rijn <bxbian951122@gmail.com>
Date: Mon, 2 Jan 2017 13:42:32 -0600
Subject: [PATCH] Added ellipsis property to table column
---
src/components/table/cell.vue | 3 ++-
src/styles/components/table.less | 9 ++++++++-
test/routers/table.vue | 61 +++++++++++++++++++++++++++++++++++++------------------------
3 files changed, 47 insertions(+), 26 deletions(-)
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 2c17edb..cbe7959 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.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
}
];
}
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index b6030e2..f6a47e4 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -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
+}
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 844a9d0..ed16185 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -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
}
}
}
--
libgit2 0.21.4