@@ -23,10 +30,11 @@
import Cell from './expand';
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue';
+ import Tooltip from '../tooltip/tooltip.vue';
export default {
name: 'TableCell',
- components: { Icon, Checkbox, Cell },
+ components: { Icon, Checkbox, Cell, Tooltip },
props: {
prefixCls: String,
row: Object,
@@ -45,7 +53,8 @@
return {
renderType: '',
uid: -1,
- context: this.$parent.$parent.$parent.currentContext
+ context: this.$parent.$parent.$parent.currentContext,
+ showTooltip: false, // 鼠标滑过overflow文本时,再检查是否需要显示
};
},
computed: {
@@ -78,6 +87,13 @@
},
handleClick () {
// 放置 Checkbox 冒泡
+ },
+ handleTooltipIn () {
+ const $content = this.$refs.content;
+ this.showTooltip = $content.scrollWidth > $content.offsetWidth;
+ },
+ handleTooltipOut () {
+ this.showTooltip = false;
}
},
created () {
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index 94ab2baf..f9cc948a 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -158,6 +158,16 @@
text-overflow: ellipsis;
}
+ &-tooltip{
+ width: 100%;
+ &-content{
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
&-with-expand{
height: 47px;
line-height: 47px;