Table Column add tooltip prop

src/components/table/cell.vue

@@ -5,7 +5,14 @@
             <Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
         <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
-        <template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
+        <template v-if="renderType === 'normal'">
+            <template v-if="column.tooltip">
+                <Tooltip transfer :content="row[column.key]" :disabled="!showTooltip" :max-width="300" class="ivu-table-cell-tooltip">
+                    <span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
+                </Tooltip>
+            </template>
+            <span v-else>{{row[column.key]}}</span>
+        </template>
         <template v-if="renderType === 'expand' && !row._disableExpand">
             <div :class="expandCls" @click="toggleExpand">
                 <Icon type="ios-arrow-forward"></Icon>
@@ -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 () {

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;